De ultieme gids voor Tailwind CSS: van beginner tot expert, voor het bouwen van moderne websites.

Wat is Tailwind CSS?

Tailwind CSS is een CSS-framework dat focus legt op functionaliteit. Het biedt ontwikkelaars een groot aantal praktische, laag niveau-indelingen (klassen) om snel aangepaste designs te bouwen. In tegenstelling tot frameworks zoals Bootstrap, die vooraf gedefinieerde componenten (zoals knoppen en kaarten) bieden, biedt Tailwind atomaire stijlklassen aan. .text-center、.bg-blue-500 和 .p-4De ontwikkelaars bouwen de interface op door deze klassen rechtstreeks in het HTML te combineren, zonder dat er een aparte CSS-fail hoeft te worden geschreven.

Deze methode heeft de werkwijze van front-endontwikkeling volledig veranderd. Het elimineert de noodzaak om vaak heen en weer te schakelen tussen style sheet-bestanden en HTML-bestanden, en bespaart je ook de moeite om een hele hoop zinloze CSS-classnamen voor componenten te bedenken. Omdat de stijlregels rechtstreeks in het HTML zijn opgenomen, kan de grootte van het uiteindelijke CSS-bestand worden geoptimaliseerd met behulp van technieken als Tree Shaking. Build-tools zoals PostCSS pakken namelijk alleen de stijlclassen die daadwerkelijk worden gebruikt in.

Core concepts and basic usage

Om Tailwind CSS efficiënt te gebruiken, is het belangrijk om enkele fundamentele designfilosofieën te begrijpen. De eerste filosofie is “Utility-First”: alle stijlen moeten worden gerealiseerd door het combineren van praktische klassen. Dit houdt de ontwerpbeperkingen binnen de door het systeem gedefinieerde designregels, waardoor consistentie en onderhoudbaarheid worden gewaarborgd. De tweede filosofie is “responsief ontwerp”: Tailwind gebruikt een mobiele-first-breukpuntsysteem, waardoor het ontwerp goed past op verschillende schermformaten. sm:、md:、lg:、xl:、2xl:Het is gemakkelijk om verschillende stijlen aan te passen aan verschillende schermgrootten. Ten slotte zijn er de “statusvarianten”: dit kan worden gerealiseerd door bijvoorbeeld een prefix toe te voegen. hover:、focus:、active:、disabled: Dit maakt het gemakkelijk om de interactieve staat van elementen te beheersen.

Aanbevolen leesmateriaal Master Tailwind CSS: Een praktische gids voor het ontwikkelen van componenten, van het begin tot de volle vertrouwdheid。

Initiëren en configureren van het project

De gemakkelijkste manier om met Tailwind CSS te starten, is via het CLI (Command Line Interface) tool. Installeer eerst Tailwind en de vereiste afhankelijkheden met npm of yarn. Vervolgens initialiseer je de configuratiebestand. tailwind.config.jsDeze configuratiebestand vormt de kern van het aangepaste Tailwind-ontwerpssysteem. Hier kun je parameters van het designssysteem definiëren, zoals de kleurpalet, fonts, ruimteverhoudingen en breakpoint-waarden van het project.

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 →

Een typisch proces voor het installeren en configureren van commando's verloopt als volgt:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Dit zal worden gecreëerd in het project. tailwind.config.js 和 postcss.config.js De volgende stap is om de inhoud van deze bestanden te integreren in je hoofdCSS-bestand (bijvoorbeeld…) src/styles.cssInlees de Tailwind-commando's in het betreffende document:

@tailwind base;
@tailwind components;
@tailwind utilities;

De bouwtool zal deze instructies verwerken en op basis van je gebruiksgewoonten het uiteindelijke CSS genereren.

Praktische combinaties in de praktijk

In echte HTML of JSX wordt een component gemaakt door meerdere handige klassen te combineren. Als voorbeeld: een blauwe button met een hover-effect.

Aanbevolen leesmateriaal Praktische handleiding voor Tailwind CSS in het Chinees: van nul naar een moderne, responsieve UI。

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300">
  点击我
</button>

Hier,.bg-blue-600 De achtergrondkleur is ingesteld..hover:bg-blue-700 Er is een donkereere achtergrondkleur gedefinieerd wanneer de muis over een bepaald element wordt gehouden..py-2 和 .px-4 De marginen zijn ingesteld..rounded-lg Het zijn ronde hoeken..shadow-md Er is een schaduw toegevoegd. .transition 和 .duration-300 Ze hebben samen een animatie gemaakt die een soepe overgang van de kleurveranderingen mogelijk maakt. Dit zorgt ervoor dat de bedoeling van het ontwerp duidelijk is in het HTML.

Geavanceerde technieken en beste praktijken

Als het project groter wordt, wordt het moeilijk om lange klassennamen rechtstreeks in HTML op te schrijven, omdat dit moeilijk te onderhouden is. Tailwind biedt enkele manieren om dit probleem op te lossen en biedt daarnaast meer mogelijkheden voor personalisatie.

Componenten extraheren en gebruiken met @apply

Hoewel Tailwind het gebruik van praktische klassen aanmoedigt, is het beste gebruik van de tijd om combinaties die vaak in een project voorkomen en een vaste opmaak hebben, te extraheren en te converteren in CSS-componenten of inbegrepen componenten van het framework. In CSS kun je dit doen door… @apply De instructie bundelt een reeks praktische klassen in een nieuwe, aangepaste klasse.

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.

Als voorbeeld: extracteer de stijl van de bovenstaande button in een object met de naam .btn-primary De klassen van:

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300;
}

Vervolgens kun je deze korte klassenaam rechtstreeks gebruiken in HTML:<button class="btn-primary">点击我</button>Dit behoudt de flexibiliteit van het gebruiksgemakken en verbetert tegelijkertijd de herbruikbaarheid en leesbaarheid van de code. In frameworks als React en Vue is het veel gebruikelijker om dit onderdeel van de code te extraheren en als een herbruikbare component te gebruiken. <Button> Componenten.

Diep gepersonaliseerd ontwerpssysteem

De kracht van Tailwind zit in zijn personalisatie mogelijkheden. Dit wordt bereikt door het aanpassen van… tailwind.config.js Je kunt je eigen ontwerpssysteem volledig afstemmen op de brandgidsen. Hierdoor kun je bij het instellen van de configuratieobjecten… theme.extend Deel van de waarden worden vervangen door nieuwe waarden, of... theme Deze instellingen overschrijven de standaardwaarden op bepaalde plaatsen.

Aanbevolen leesmateriaal De krachtige mogelijkheden van Tailwind CSS ontdekken: een volledig handboek over het praktische en flexibele CSS-framewerk。

Als voorbeeld: het toevoegen van aangepaste kleuren en een uitgebreide schaal van ruimte tussen elementen.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1a365d',
        'brand-accent': '#ed8936',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Nadat het is gedefinieerd, kun je het gebruiken. .bg-brand-blue 和 .mt-128 Zo'n klasse. Dit ontwikkelingsmodel, gebaseerd op configuratiebestanden, zorgt ervoor dat het hele team met één uniforme en controleerbare ontwerpssprache werkt.

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.

Optimalisatie en productieimplementatie

De CSS-pakketten die worden gemaakt met Tailwind bevatten alle mogelijke klassen, waardoor de bestanden zeer groot zijn (meestal meer dan enkele MB). Dit is alleen geschikt voor de ontwikkelingsomgeving. Voor de productieomgeving moet het CSS worden geoptimaliseerd door alle ongebruikte stijlen te verwijderen.

Tree Shaking met PurgeCSS

Sinds Tailwind CSS versie 2.0 zijn de CLI (Command Line Interface) en de PostCSS-plugin geïntegreerd met ondersteuning voor PurgeCSS (in versie 3.0 en later bekend als “content scanning”). Je moet dit dus activeren als je Tailwind CSS gebruikt. tailwind.config.js Configuration in Chinese content Option: Geef op waar alle templatebestanden zijn opgeslagen die mogelijk Tailwind-classnamen bevatten.

Een voorbeeld van de configuratie voor veel voorkomende projecten is als volgt:

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tijdens het bouwen van de productieversie scannt Tailwind alle strings in deze bestanden die als klassennamen kunnen dienen en vergelijkt ze met zijn eigen lijst met handige klassen. Enkel de klassen die worden gevonden, worden opgenomen in het uiteindelijke CSS-bestand. Dankzij deze optimalisatie kan de grootte van het CSS-bestand worden teruggebracht tot 10 KB of zelfs minder, waardoor de laadtijd van de pagina aanzienlijk verbetert wordt.

Werken met dynamische klassenamen

In moderne JavaScript-frames werken klassenamen vaak dynamisch samen. Om te voorkomen dat PurgeCSS deze dynamisch genereerde klassen per ongeluk verwijdert, moet je de klassennamen opgeven als volledige strings. Gebruik geen string-uitbreidingsoperator om delen van de klassennamen te genereren.

Een veilige manier (de framework zal dit automatisch kunnen verwerken):

<div classname="{`text-${error" ? 'red' : 'green'}-600`}>de aandacht op iets vestigen</div> // Gevaarlijk! Kan worden verwijderd.

Een veiliger manier om te zorgen dat de klassenamen volledig worden weergegeven:

<div classname="{error" ? 'text-red-600' : 'text-green-600'}>de aandacht op iets vestigen</div>

Of, als je echt zeer dynamische klassen nodig hebt, kun je dat doen… tailwind.config.js 的 safelist In de opties kun je handmatig aangeven welke klassen moeten worden behouden, bijvoorbeeld: safelist: ['text-red-600', 'text-green-600']。

Samenvatting

Tailwind CSS biedt dankzij zijn praktische en prioriteiten gebaseerde aanpak een efficiënte, consistente en zeer aanpasbare manier van front-end-styling. Het verlicht de mentale belasting bij het schrijven en onderhouden van CSS, beperkt designafhankelijkheden tot een configureerbaar systeem en zorgt dankzij intelligente optimalisaties tijdens het bouwen voor hoge prestaties in de productieomgeving. Tailwind is uitstekend geschikt voor zowel snel ontworpen prototypes als grote, professionele projecten. Het beheersen van de kernconcepten, het responsieve en stateful variantensysteem, methoden voor componentextractie en de configuraties voor productieoptimalisatie is essentieel om moderne, high-performance webinterfaces te bouwen. Met de steeds grotere ontwikkeling van de Tailwind-ecosysteem wordt het een van de belangrijkste hulpmiddelen voor front-end-developers in 2026.

Veelgestelde vragen (FAQ)

Wat zijn de belangrijkste verschillen tussen Tailwind CSS en Bootstrap?

Tailwind CSS is een framework dat zich richt op praktische toepassingen. Het biedt atomaire CSS-klassen die ontwikkelaars kunnen combineren, zonder vooraf ontworpen componenten. Het legt nadruk op personalisatie en het mogelijkheid om designs vanaf nul te bouwen.

Bootstrap is een framework waarbij componenten voorrang hebben. Het biedt een reeks geheel klaar beschikbare UI-componenten met vastgestelde stijlen (zoals navigatiebalken en modalvensters). Met Bootstrap is het mogelijk om sneller een consistent gestyled interface op te bouwen. Echter, om de stijlen diep te personaliseren, is het vaak nodig om veel CSS-regels te overschrijven, waardoor stijlconflicten en onnodige complexiteit kunnen ontstaan.

Zal het schrijven van veel klassennamen in HTML de code onoverzichtelijk maken?

In het begin kan het wel zo voelen dat HTML… class De attributen zijn wel erg lang geworden. Maar door de stijllogica op de weergave-laag (view layer) te concentreren, hoeven ontwikkelaars niet meer heen en weer te schakelen tussen HTML- en CSS-bestanden, waardoor de ontwikkelingsefficiëntie daadwerkelijk wordt verbeterd.

Om de code opgeruimd te houden, wordt het sterk aanbevolen om voor herhaaldelijke, complexe combinaties van klassen gebruik te maken van… @apply De instructies kunnen worden gebruikt om CSS-componenten te creëren, of om ze te verpakken in herbruikbare UI-componenten met front-end frameworks als React of Vue. Dit behoudt de flexibiliteit van Tailwind en zorgt tegelijkertijd voor een betere onderhoudbaarheid van het codebestand.

Zullen de stijlen van Tailwind mijn eigen globale stijlen overschrijven?

Tailwind CSS biedt een groot aantal basisfuncties aan op het fundamentele niveau.@tailwind baseEr is een lichtgewichtige, moderne CSS-hersteloptie geïntroduceerd: Preflight. Deze standaardiseert de standaardmarginaalen, fonten en andere eigenschappen van veel elementen, waardoor deze mogelijk de eerder gedefinieerde globale stijlen kunnen overschrijven.

Als je de standaardstijlen van bepaalde elementen wilt behouden of ze wilt gebruiken in combinatie met een bestaande stijlbibliotheek, kun je Preflight uitschakelen door deze optie te configureren. tailwind.config.js 的 corePlugins Bepaalde plugins kunnen worden uitgeschakeld tijdens het instellen. Een betere optie is om Tailwind te gebruiken als basis voor het projectontwerp en de globale stijlregels te uniformeren op basis van het designsysteem van Tailwind.

Hoe voeg je eigen, handgemaakte gebruikersklassen toe aan Tailwind CSS?

Er zijn twee belangrijke manieren. De eerste manier is via het uitbreiden van de configuratiebestanden. tailwind.config.js 的 theme.extend Deze methode om nieuwe kleuren, ruimtes en fontgrootten toe te voegen, zorgt ervoor dat de gecreëerde klassen automatisch responsief zijn en ondersteuning bieden voor verschillende toestandsoverstellingen (state variations).

De tweede optie is om zelf CSS te schrijven en deze te gebruiken. @layer Instructie. Je kunt aangepaste stijlen in Tailwind integreren. base、components 或 utilities De lagen moeten worden georganiseerd zodat ze op de juiste manier worden gerangschikt en verpakt. Voorbeeld:@layer utilities { .custom-rotate { transform: rotate(15deg); } }。