Een praktische handleiding voor Tailwind CSS, van nul tot expert: het bouwen van moderne, responsieve websites.

Tailwind CSS is een CSS-framework dat focus legt op functionaliteit. Het biedt een groot aantal combinabele en praktische klassen (utility classes), waardoor ontwikkelaars snel en eenvoudig elke gewenste aangepaste design kunnen bouwen in HTML. In tegenstelling tot traditionele componentbibliotheken zoals Bootstrap, biedt Tailwind geen vooraf gemaakte componenten met vaste stijlen (zoals knoppen of kaarten) aan. In plaats daarvan biedt het een set basisinstrumenten waarmee je het uiteindelijke uiterlijk volledig kunt bepalen. De kernfilosofie van Tailwind is “vrijheid binnen beperkingen”: door een goed ontworpen systeem voor afstanden, kleuren, fontgrootten en dergelijke wordt de consistentie van het design gewaarborgd, terwijl ontwikkelaars toch de grootste flexibiliteit krijgen.

De kernconcepten en voordelen van Tailwind CSS

Het begrijpen van hoe Tailwind CSS werkt, is essentieel voor het efficiënt gebruiken van deze technologie. Het concept achter Tailwind CSS breekt met de traditionele manier van CSS-programmeren.

Pragmatisme als prioriteit: de paradigmatische benadering

Bij de traditionele ontwikkeling met CSS moet voor elke element een semantische klassenaam worden gecreëerd (bijvoorbeeld)... .btn-primaryVervolgens worden de stijlregels opgeslagen in een apart CSS-bestand. Tailwind CSS hanteert het principe “praktischheid eerst” en maakt stijlkenmerken direct corresponderen met korte klassennamen. Als je bijvoorbeeld een button wilt instellen die centraal staat, een binnenmaat (padding) heeft en een blauwe achtergrond, hoef je alleen maar de volgende regel op te schrijven:<button class=“text-center p-4 bg-blue-500”>点击</button>Deze methode vermindert de kosten van het wisselen van context tussen HTML- en CSS-bestanden aanzienlijk, en maakt de stijlregels in de code duidelijk en overzichtelijk.

Aanbevolen leesmateriaal De ultieme gids voor Tailwind CSS: van basis tot praktijk, efficiënt ontwikkelen met een modern CSS-framework.。

Responsive design en varianten

Tailwind CSS beschikt over een krachtig responsief ontwerpssysteem. Het gebruikt prefixen voor breakpoint-definities die zijn gericht op mobiele apparaten. sm:、md:、lg:、xl:、2xl:Dit betekent dat je basisstijlen schrijft voor mobiele apparaten, en vervolgens stijlen toevoegt of overschrijft voor grotere schermen door prefixen te gebruiken.<div class="“text-sm" md:text-lg”> Dit betekent dat de fontgrootte wordt gewijzigd voor schermgrootten van gemiddelde grootte of groter. lgNaast het zijn responsive (aanpassbaar op verschillende schermformaten), ondersteunt het ook varianten van de status met behulp van prefixen. hover:、focus:、active:、disabled:Dit maakt het bijzonder eenvoudig om interactieve stijlen toe te voegen.

De websitebouwer van WordPress.com

99.999% beschikbaarheid + disaster recovery tussen regio's, 24-uurs ondersteuning, gratis gebruik van A.I. bij het bouwen van websites bij aankoop van een blogpakket.

Gratis domeinnaam voor één jaar

Ga naar de website van WordPress.com voor hulp bij het bouwen van een website →

De websitebouwassistent van UltaHost.

Meer dan 900 gratis, aanpasbare sjablonen met de SEO-functionaliteit die nodig is om de zichtbaarheid van websites in zoekmachines te optimaliseren.

Aanbieding 40%

Ga naar de website van UltaHost voor hulp bij het bouwen van een website →

Uitstekend aanpasbaar

Hoewel Tailwind een groot aantal standaardinstellingen biedt, is het zeker geen starren framework. Alle designelementen (kleuren, ruimtes, fonten, breukpunten, etc.) kunnen worden aangepast via de bestanden in de root-map van het project. tailwind.config.js De bestanden kunnen volledig worden aangepast. Je kunt de standaardthema's uitbreiden of ze volledig vervangen om ze perfect te laten passen bij je merkdesignrichtlijnen. De flexibele instellingen zorgen ervoor dat Tailwind kan worden gebruikt voor projecten van alle schalen, van eenvoudige prototypes tot complexe bedrijfsapplicaties.

Omgeving opzetten en basisconfiguratie

Er zijn verschillende manieren om met Tailwind CSS te gaan werken, maar de meest voorkomende manier is om het te integreren met je buildtool en het PostCSS-plugin.

Installeer met PostCSS (aan te raden)

Dit is de meest flexibele en uitgebreide methode die geschikt is voor moderne front-end toolchains zoals Vite, Webpack en Next.js. Installeer eerst Tailwind en zijn afhankelijkheden met npm of yarn.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Deze opdracht generereert twee bestanden:tailwind.config.js 和 postcss.config.jsVolgens de opgegeven instructies moet je nu naar je hoofd-CSS-bestand gaan (bijvoorbeeld het bestand waarin alle basisregels voor het uiterlijk van je website zijn opgeslagen). src/styles.cssDe instructies om Tailwind in te voeren uit (…)

Aanbevolen leesmateriaal In diepere analysen van Tailwind CSS: een praktische gids voor stijlframeworks in moderne front-endontwikkeling。

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Ten slotte, tailwind.config.js Geef het pad van het configuratiebestand op, zodat Tree Shaking (optimalisatie door ongebruikte stijlen te verwijderen) deze ongebruikte stijlen correct kan verwijderen.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Snel in de praktijk met CDN (Content Delivery Network)

Für het snel maken van prototypen of voor eenvoudige demonstraties kun je de content rechtstreeks via een CDN-link invoeren. Er zijn echter enkele beperkingen: er worden geen optimalisaties tijdens het bouwen van de content gemaakt, je kunt geen aangepaste instellingen gebruiken, en enkele geavanceerde functies (zoals bepaalde instructies) worden niet ondersteund. @applyStatusvarianten group-* (Enzovoort).

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hallo, Tailwind!</h1>
</body>
</html>

Een modern en responsief ontwerp bouwen

De responsieve lay-out is een sterke punt van Tailwind CSS; de beschikbare toolklassen maken het eenvoudig om interfaces te creeren die zich aanpassen aan verschillende schermen.

De Bluehost-websitebouwer

Het aanbieden van tools voor het maken van websites met A.I., 24/7 online chat- en telefonische ondersteuning, een gratis domeinnaam voor een jaar, gratis CDN en een uptime SLA van 99,991%

Bezoek Bluehost.

Flexibele grid-systeem

Tailwind biedt geen vergelijkbare mogelijkheden aan. row 和 col-* In plaats van de traditionele grid-classen wordt gebruik gemaakt van de basisvereisten van Flexbox en CSS Grid om grids te bouwen. Bijvoorbeeld: met Flexbox kan een layout met twee kolommen worden gecreëerd die op mobiele apparaten worden gestapeld en op desktop-apparaten naast elkaar worden weergegeven.

<div class="flex flex-col md:flex-row">
  <div class="md:w-1/3 p-4 bg-gray-100">Sidebar</div>
  <div class="md:w-2/3 p-4 bg-white">Het hoofdgedeelte met inhoud</div>
</div>

Met CSS Grid is het mogelijk om complexere lay-outs te creeren:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-blue-200 p-4">Project 1</div>
  <div class="bg-blue-200 p-4">Project 2</div>
  <div class="bg-blue-200 p-4">Project 3</div>
  <div class="bg-blue-200 p-4">Project 4</div>
</div>

Containeren en ruimtebeheer

container De klasse biedt een centraal geplaatst container met een maximale breedtegrens die automatisch reageert op uw instellingen. Toolsklasse voor het bepalen van ruimtes (spacing tools class).p-*, m-*, space-*Op basis van een instelbare schaal wordt de consistentie van de afstanden tussen de verschillende onderdelen van het project gewaarborgd.p-4 Exprimeer 1rem De margin van binnen...mt-8 Exprimeer 2rem De buitenmarge (margin) van…

Aanbevolen leesmateriaal Een moderne, responsieve website maken: het Tailwind CSS-framework vanaf nul leren beheersen.。

Toon en verberg controleelementen

Het aanpassen van het weergeven en verbergen van controlelementen op verschillende schermen is een veel voorkomend vereiste in responsief ontwerp. Tailwind biedt hierbij hulp. hidden 和 block(Of) flex、gridDit wordt gerealiseerd door het combineren van een bepaald prefix met de breakpoint. Voorbeeld:<div class="“hidden" md:block”> Dit element wordt alleen op schermen van gemiddelde of grotere afmetingen weergegeven en wordt op kleinere schermen verborgen.

Advanced techniques and performance optimization

Het beheersen van enkele geavanceerde technieken kan je helpen Tailwind efficiënter te gebruiken en de prestaties van het eindresultaat te garanderen.

hosting.com

Gratis SSL, Cloudflare CDN, WAF, 40+ wereldwijde datacenters om uit te kiezen, lagere latentie dankzij een locatie dichterbij, 24/7/365 serviceondersteuning. Je bespaart nu tot wel 671 TP4T, en ondersteuning voor A.I.-ontwikkeling en SEO-optimalisatie is inbegrepen.

Ga naar hosting.com.

Extract components and use the @apply directive

Als een groep praktische klassen meerdere keren in een project wordt gebruikt (bijvoorbeeld knoppen in een bepaald ontwerp), kan men om duplicatie te voorkomen gebruikmaken van… @apply De instructie haalt de componentklassen uit het CSS.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

En vervolgens gebruik je dit rechtstreeks in HTML: <button class=“btn-primary”>Maar moet met voorzichtigheid worden gebruikt. @applyAls je CSS-technieken te veel gebruikt, kom je terug tot de traditionele manier van schrijven in CSS, waardoor je de belangrijkste voordelen van praktische klassen (waarbij de stijlkenmerken direct zichtbaar zijn) verliest. Het wordt meestal alleen aanbevolen om deze technieken te gebruiken voor stijlpatronen die echt zeer herhaald worden.

Het inschakelen van de JIT-modus en Tree Shaking

Sinds Tailwind CSS versie 2.1 is de Just-In-Time (JIT)-engine de standaardmodus. In de JIT-modus worden stijlen op demand gecreëerd, in plaats van dat het hele grote CSS-bestand van tevoren wordt opgesteld. Dit betekent dat je vrijwel altijd de braketechniek kunt gebruiken om willekeurige waarden aan te geven. top-[117px] 或 bg-[#1da1f2]En je hoeft je geen zorgen te maken over een toegenomen omvang van de bestanden. Daarnaast is dit mogelijk door de best mogelijke configuratie. tailwind.config.js De Chinese versie van dit bericht is niet beschikbaar. content De bouwtool analyseert uw templatebestand intelligent en bevat alleen de klassen die worden gebruikt in het uiteindelijke CSS-bestand. Dit zorgt ervoor dat het bestand zo klein mogelijk blijft.

Functies uitbreiden met plugins

Het ecosysteem van Tailwind biedt een grote verscheidenheid aan officiële en community-plug-ins, waarmee nieuwe, handige klassen, componenten of varianten kunnen worden toegevoegd. Denk hierbij aan officiële plug-ins. @tailwindcss/forms Er zijn betere standaardstijlen beschikbaar voor de formulierelementen.@tailwindcss/typography Een voorstel is gegeven. prose Klassen die worden gebruikt om Markdown- of CMS-genereerde HTML-content snel te versieren. Je kunt ze installeren met npm en gebruiken in je configuratiebestanden. plugins Invoegen in een array.

Samenvatting

Tailwind CSS heeft de manier waarop ontwikkelaars hun stijlen schrijven volledig veranderd, door een praktische en prioriteiten gebaseerde aanpak te hanteren. Het biedt een set onderliggende, combinerbare toolklassen waarmee stijlen rechtstreeks in het HTML kunnen worden ingebouwd, waardoor de ontwikkelingsefficiëntie en het designeergeboden een grote verbetering hebben gekregen. Het ingebouwde responsieve systeem en de zeer persoonlijke instellingen maken het eenvoudig en effectief om moderne, adaptieve webinterfaces te bouwen. Door de kernconcepten, layouttechnieken en geavanceerde optimalisatievaardigheden te beheersen, kunnen ontwikkelaars snel van een beginner naar een expert worden. Hierbij behouden ze de volledige controle over de designdetails en leveren ze high-performance front-end-producten op.

Veelgestelde vragen (FAQ)

Is het CSS-bestand dat wordt gemaakt door Tailwind CSS erg groot in omvang?

Nee. Dit is eigenlijk een veel voorkomend misverstand. Tailwind CSS gebruikt PurgeCSS (die in JIT-modus is ingebouwd) voor het uitfilteren van ongebruikte CSS-klassen. Tailwind CSS scannt alle door jou opgegeven template-bestanden grondig en behoudt alleen de CSS-klassen die daadwerkelijk worden gebruikt, terwijl alle overbodige stijlen worden verwijderd. Hierdoor is het uiteindelijke CSS-bestand in een productieomgeving meestal slechts ongeveer 10 KB groot, of zelfs nog kleiner. Dit is veel compacter dan veel handmatig geschreven CSS-klassen of traditionele UI-frames.

Zorgt het gebruik van Tailwind in teamprojecten voor een verwarrend HTML-structuur?

Dat hangt af van de standaarden en gewoonten van het team. In eerste instantie kan het er inderdaad chaotisch uitsehen wanneer er veel klassennamen in HTML zijn. Veel teams ontdekken echter dat dit soort “chaos” voorspelbaar en eenvoudig te vinden is; het zorgt ervoor dat de stijllogica op één plek is opgeslagen (de view-laag), waardoor er geen meer nodig is om tussen meerdere CSS-bestanden heen te bladeren om stijldefinities op te zoeken. Door goede afspraken te maken (bijvoorbeeld het gebruik van een bepaald format of namenconventie) kan dit probleem worden vermeden. @apply Door echt duplicerende onderdelen te verwijderen, en gebruik te maken van de intelligente suggesties en fragmentafvullingen van de editor, kan deze complexiteit goed worden beheerd. Veel ontwikkelaars geloven dat dit de moeite waard is, omdat het de ontwikkelings snelheid en de onderhoudsvriendelijkheid aanzienlijk verbetert.

Kan Tailwind CSS samenwerken met bestaande CSS- of UI-frames (zoals Bootstrap)?

Ja, dat is mogelijk, maar het wordt niet aanbevolen om dit op de lange termijn te doen. Je kunt Tailwind CSS en het CSS van een ander framework tegelijkertijd in je project gebruiken. Omdat beide frameworks proberen de globale basisstijlen en toolklassen te bepalen, is het zeer waarschijnlijk dat er stijlconFLICTen optreden, waardoor onvoorspelbare resultaten kunnen ontstaan. De beste praktijk is om dit geleidelijk te doen: gebruik Tailwind in nieuwe componenten en herschrijf de oude componenten steeds meer, totdat de afhankelijkheid van het oude framework is weggegaan. De praktischheid van Tailwind maakt het zeer geschikt voor dit soort stapsgewijze herstructurering.

Hoe kun je de themakleur, font en ruimte tussen elementen (design tokens) zelf instellen?

Alles wat is aangepast, bevindt zich in de rootmap van het project. tailwind.config.js Deze actie wordt uitgevoerd in de bestand. Je kunt... theme.extend Er kan configuratie worden toegevoegd of uitgebreid onder een object. Als je bijvoorbeeld een merkkleur wilt toevoegen en de fontfamilie wilt uitbreiden, kun je dit op de volgende manier configureren:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#1da1f2',
      },
      fontFamily: {
        'sans': ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Nadat je het hebt gewijzigd, kun je het direct gebruiken, op een vergelijkbare manier. bg-brand 和 font-sans De klassen zijn gemaakt. Tailwind genereert op basis van je configuratie automatisch alle relevante hulpprogramma-klassen (tool classes).