Tailwind CSS is een CSS-framework dat focus legt op functionaliteit.

Tailwind CSS is een CSS-framework dat focus legt op functionaliteit. Het biedt een reeks atomische, vooraf gedefinieerde en handige klassen (utility classes) aan, waardoor ontwikkelaars snel aangepaste gebruikersinterfaces kunnen bouwen. In tegenstelling tot traditionele componentenbaserde CSS-frameworks wordt het gebruik van HTML om stijlen direct te bepalen gestimuleerd, waardoor er een sterke verbinding tussen stijl en structuur wordt gecreëerd. Deze unieke aanpak heeft de manier van front-end-stijlontwikkeling veranderd.

Core principles and working mechanisms

De kernfilosofie van Tailwind CSS is “atomar CSS”. Het is geen framework dat vooraf gemaakte componenten (zoals knoppen of kaarten) biedt, maar een set onderliggende tools die bestaat uit duizenden kleine, specifiek ontworpen klassen voor één specifiek doel.

Hoe werken praktische klassen (utility classes)?

框架中的每个实用类（Utility Class）通常对应一条或多条 CSS 规则。例如，类名 .text-center Corresponderend met text-align: center;en .bg-blue-500 Dit resulteert in een specifieke blauwe achtergrondkleur. Ontwikkelaars kunnen de gewenste stijl creëren door deze klassen te combineren op HTML-elementen, zonder dat ze zelf CSS hoeven te schrijven.

Aanbevolen leesmateriaal Volledig in de kunst van Tailwind CSS: een praktische gids van het begin tot de praktijk。

Proces van stijlgeneratie

Tijdens het starten van het project scant Tailwind alle templatebestanden in het project op. *.html, *.jsx, *.vueHet identificeert alle gebruikte praktische klassen en baseert zich vervolgens op de configuratiebestand. tailwind.config.jsDeze gebruikte klassen en hun varianten (zoals de staat bij het overgaan van de muisaanraking naar de muisovergang en de gefocuste staat) worden dynamisch in een CSS-bestand opgeslagen, waardoor het bestand zo klein mogelijk blijft. Dit op maat genereren zorgt ervoor dat het uiteindelijke CSS-bestand zo compact mogelijk is.

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 →

Instalatie en basisconfiguratie

Het integreren van Tailwind CSS in een project is zeer eenvoudig; het ondersteunt namelijk verschillende buildtools en frameworks.

Installeer via npm.

De meest gebruikelijke manier om Tailwind CSS te installeren, is via npm of yarn. Eerst moet je in het root-verwijfingspad van het project een npm-project initialiseren, en daarna worden Tailwind CSS en de vereiste afhankelijkheden geïnstalleerd.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Het uitvoeren van het initialisatiecommando leidt tot het genereren van een standaardconfiguratiebestand. tailwind.config.js。

Configureren van de scanpad voor inhoud

Genererend... tailwind.config.js In het bestand is het belangrijkste… content Deze velden geven Tailwind aan welke bestanden moeten worden gescand op zoek naar klassennamen.

Aanbevolen leesmateriaal Tailwind CSS: Een gids voor beginners en ervaren gebruikers: van nul een moderne, responsieve interface bouwen。

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

Basistijlen invoeren

Vervolgens voeg je de volgende code toe aan je hoofd-CSS-bestand (bijvoorbeeld): src/styles.cssIn dit voorbeeld wordt gebruikgemaakt van @tailwind Instrukties om de kernstijlen van Tailwind in te brengen.

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

Vervolgens moet je ervoor zorgen dat je build-proces (bijvoorbeeld met webpack of Vite) is ingesteld om PostCSS te gebruiken om deze CSS-bestand te verwerken. Op deze manier kunnen de voorverwerkingsschritten van Tailwind effectief worden uitgevoerd.

Praktische toepassingen en veelgebruikte klassen

Het belangrijkste om de basis van Tailwind CSS te beheersen, is om vertrouwd te raken met de namengivingsconventies en de manier van combineren van klassennamen.

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.

Layout en ruimte tussen elementen

Tailwind biedt een set systematische maatstaven voor het bepalen van ruimtes (op basis van…) remEn klassen voor het lay-out. Bijvoorbeeld,.p-4 in de naam van padding: 1rem;，.mt-2 in de naam van margin-top: 0.5rem;Voor een flexibele box-layout (flexbox layout) kun je gebruikmaken van… .flex, .items-center, .justify-between etc.

<div class="flex justify-between items-center p-4">
  <div>De inhoud aan de linkerkant.</div>
  <div>De inhoud aan de rechterkant</div>
</div>

Kleur en typografie

Textkleur wordt gebruikt voor... .text-{颜色}-{色度}Zoals .text-gray-800De achtergrondkleur wordt gebruikt voor… .bg-{颜色}-{色度}De fontgrootte kan worden aangepast. .text-sm, .text-lg, .text-xl Een reeks van vooraf gedefinieerde klassen.

Status en responsieve varianten

Tailwind CSS biedt de mogelijkheid om voorafstate-prefixen toe te voegen aan klassenamen om interactieve stijlen te definiëren. Bijvoorbeeld:.hover:bg-blue-600 De donkere blauwe achtergrond wordt toegepast wanneer de muis erover wordt gehouden. Het responsieve ontwerp werkt op deze manier… .md:text-center De klassenimplementatie zorgt ervoor dat de tekst op schermen van gemiddelde tot grotere afmetingen centraal wordt weergegeven. Deze varianten kunnen vrij worden gecombineerd.

Aanbevolen leesmateriaal Het potentieel van Tailwind CSS ontwikkelen: een praktische gids van basis tot verder。

Advanced features and customization

Naast de klaar voor gebruik beschikbare klassen, biedt Tailwind ook uitstekende mogelijkheden voor uitbreidingen en personalisatie.

Diep gepersonaliseerd thema

在 tailwind.config.js 的 theme.extend In het object kun je de standaarddesigntokenen overschrijven of uitbreiden, zoals kleuren, fonten, ruimtes tussen elementen en andere instellingen.

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.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Daarna kunt u gebruikmaken van zelfgemaakte klassen, zoals… .text-brand-primary 和 .p-128。

Extract reusable components.

Hoewel het gebruik van praktische klassen wordt gestimuleerd, kunnen voor stijlfragmenten die veelvuldig in een project worden gebruikt andere opties worden gekozen. @apply De instructie haalt de componentklassen uit het 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;
}

Het gebruiken van derde-partij plugins

Het uitgebreide plugin-ecosysteem biedt de mogelijkheid om de functionaliteiten van Tailwind uit te breiden. Bijvoorbeeld…@tailwindcss/forms Een betere stijl voor de formulieren bieden.@tailwindcss/typography Om een mooi indeling van de tekst in een artikel te realiseren, hoef je alleen maar de benodigde software te installeren en deze te configureren in het configuratiebestand. plugins Je kunt dit eenvoudig invoeren in een array.

Samenvatting

Tailwind CSS verbetert de efficiëntie en flexibiliteit van front-end-stijlontwikkeling dankzij zijn unieke filosofie, waarbij praktische aspecten voorop staan. Het biedt een hoge mate van personalisatie door het gebruik van atomische klassennamen, zorgt voor optimale prestaties door dynamische generatie van code op maat van de behoeften, en voldoet aan de meest uitgebreide vereisten dankzij een krachtig configuratie- en plugin-systeem. Het is zeer geschikt voor zowel snel ontworpen prototypes als grote, professionele projecten. Door de kernconcepten en werkwijzen van Tailwind CSS te begrijpen, kunnen ontwikkelaars hun creativiteit op het gebied van stijl optimaal inzetten.

Veelgestelde vragen (FAQ)

Zorgt Tailwind CSS ervoor dat HTML onnodig complex of ‘onzorgvuld’ wordt (dus dat het moeilijker te begrijpen is of te bewerken is)?

Ja, het aantal klassennamen in HTML zal aanzienlijk toenemen, en dit wordt gezien als een van de belangrijkste controversiële punten. Een element kan namelijk tien of meer klassen hebben.

Maar deze “zwaarte” structuur zorgt voor een grotere lokaliteit van de stijlkenmerken, maximale personalisatie en geen enkele redundantie in het CSS. Veel ontwikkelaars vinden dit efficiënter dan het steeds heen en weer schakelen tussen verschillende CSS-bestanden en het onderhouden van de specificiteit van de selectoren. Bovendien kunnen moderne compressietools klassennamen effectief comprimeren, waardoor de daadwerkelijke grootte van het geüploade bestand nauwelijks wordt beïnvloed.

Hoe houd je de stijlconsistentie bij teamprojecten op peil?

Tailwind zelf zorgt voor een visuele consistentie door een beperkt ontwerpssysteem aan te bieden (kleuren, ruimtes tussen elementen, fontgrootten, etc.). Alle ontwikkelaars gebruiken dus hetzelfde ontwerpssysteem. rem Als basis dienen de afstandsschalen en de kleurpaletten.

Om de consistentie nog verder te verbeteren, moet het team de betreffende aspecten goed definiëren en optimaal inzetten. tailwind.config.js De aangepaste thema's die hier worden gebruikt, worden gestimuleerd en worden aanbevolen om verder te worden gebruikt. @apply Extract de vaak gebruikelijke componentestijlen. Hierbij kan ook het Prettier-plugin worden gebruikt. prettier-plugin-tailwindcss Dit gebeurt om de klassennamen automatisch te ordenen en zo een uniforme code-stijl te behouden.

Hoe groot is de grootte van het uiteindelijke CSS-bestand dat wordt gemaakt door Tailwind CSS?

Door het gebruik van PurgeCSS (nu geïntegreerd in de contentscanning), waardoor CSS-bestanden op maat worden generereerd, zijn de afgelegde CSS-bestanden meestal zeer klein. Ze bevatten alleen de klassen die daadwerkelijk in het project worden gebruikt.

Bij een typisch project is, zelfs als veel functies worden gebruikt, de grootte van het CSS-bestand meestal minder dan 10 KB. Na compressie en encoding met Brotli/Gzip wordt de transmissiegrootte nog kleiner, waardoor dit veel efficiënter is dan wanneer je de CSS-code handmatig schrijft of grote componentenbibliotheken gebruikt die ongebruikte stijlen bevatten.

Hoe moet je omgaan met dynamisch genereerde klassennamen?

Als de klassenaam dynamisch wordt generereerd door het samenvoegen van strings (bijvoorbeeld)... text-${error ? 'red' : 'green'}-500\nDe statische analysetool van Tailwind kan deze stijlen mogelijk niet herkennen, waardoor ze niet worden opgenomen in het genereerde CSS.