Tailwind CSS vanaf nul leren: de ultieme gids voor het bouwen van moderne, responsieve interfaces

Tailwind CSS is een CSS-framework dat is gebaseerd op het principe 'Utility-First'. Het biedt een groot aantal combinabele en fijngezette CSS-klassen, waardoor ontwikkelaars snel en eenvoudig gebruikersinterfaces kunnen bouwen en ontwerpen in HTML. In tegenstelling tot traditionele CSS-frameworks (zoals Bootstrap) biedt Tailwind geen vooraf gemaakte componenten met vaste stijlen (bijvoorbeeld knoppen of kaarten), maar een set atoomklassen die worden gebruikt om visuele aspecten als afstand, kleur, typografie en lay-out te bepalen. Dit bevordert de ontwikkelingsefficiëntie, vermindert de tijd die nodig is voor het regelmatig wisselen tussen CSS- en HTML-bestanden en zorgt ervoor dat de gecreerde stijlbestanden met tools als PurgeCSS kunnen worden geoptimaliseerd tot een minimum.

Core concepts and working principles

Het begrijpen van Tailwind CSS gaat hand in hand met het beheersen van de kernfilosofie en het configuratie-systeem ervan.

'Philosophy of Prioritizing Utilities'

‘Utility-First’ is de kernfilosofie van Tailwind. Dat betekent dat je complexe componenten bouwt door meerdere klassen met elk een specifieke functie te combineren, in plaats van één enkele klassenaam te gebruiken die veel CSS-attributen bevat. Als je bijvoorbeeld een knop wilt maken met een binnenrand, een blauwe achtergrond, witte tekst en ronde hoeken, hoef je geen aparte klassen in je CSS-bestand te definiëren. .btn-primary In plaats van gebruik te maken van een specifieke klassen, worden deze elementen rechtstreeks in het HTML gecombineerd. px-4 py-2 bg-blue-600 text-white rounded Deze klassen.

Aanbevolen leesmateriaal Volledig handboek voor Tailwind CSS: van nul een moderne, responsieve interface bouwen。

Deze methode biedt veel flexibiliteit. Je kunt eenvoudig elke stijl van elk element aanpassen, zonder je zorgen te maken om de specificiteit van CSS-selectors of het “vervuilen” van de globale stijlen. Het stimuleert een manier van schrijven waarbij stijlen rechtstreeks in het HTML worden opgenomen (‘inline styles’), maar biedt tegelijkertijd beperkingen van het designsysteem (zoals standaardisatie van kleuren en afstanden) en krachtige functies als responsiviteit en verschillende varianten van een element afhankelijk van de omstandigheden.

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 →

De rol van een configuratiebestand

De grote mate van personalisatie die Tailwind biedt, komt door zijn configuratiebestanden. tailwind.config.jsMet deze bestand kun je het designsysteem van Tailwind volledig beheersen. Je kunt je eigen kleurpaletten, ruimtes tussen elementen, fonten, brekpunten (breakpoints) en de afgeronde hoeken van randen (border corners) instellen, evenals alle andere designaspecten.

// tailwind.config.js 示例
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Deze configuratiebestand vormt een brug tussen je ontwerpbeslissingen en het uiteindelijke CSS-resultaat. Door het te bewerken, kun je ervoor zorgen dat het hele project zich houdt aan een uniforme ontwerpstandaard.

Omgeving opzetten en basisgebruik

Er zijn verschillende manieren om met Tailwind CSS te gaan werken, maar de meest voorkomende manier is om het te integreren in je build-proces met behulp van het PostCSS-plugin.

Installeer met PostCSS

Dit is de meest aanbevolen methode, die naadloos kan worden geïntegreerd met moderne front-end-buildingtools zoals Vite en Webpack. Installeer eerst de benodigde pakketten met npm of yarn.

Aanbevolen leesmateriaal Tailwind CSS: Een praktische handleiding om van nul tot expert te worden in dit framework。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Dit zal Tailwind CSS en de daaraan gebonden afhankelijkheden installeren, en een standaardconfiguratie genereren. tailwind.config.js Bestanden. Daarna moet je in de rootmap van het project een nieuw bestand maken. postcss.config.js Deze bestanden worden vervolgens gebruikt om Tailwind CSS en Autoprefixer te installeren als plugins.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Vervolgens, in je hoofd CSS-bestand (bijvoorbeeld...) src/styles.cssHier wordt de instructie voor het introduceren van Tailwind in de code gegeven.

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

Ten slotte: zorg ervoor dat… tailwind.config.js Het is correct geconfigureerd. content De path moet zo zijn dat Tailwind je HTML-, JavaScript- en andere bestanden kan scannen, zodat ongebruikte stijlen kunnen worden verwijderd.

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.

Het schrijven van de eerste Tailwind-stijl.

Nadat de configuratie is voltooid, kun je de handige functies van Tailwind vrij gebruiken in je HTML-code.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mijn Tailwind-pagina</title>
  <link href="/dist/styles.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
  <div class="max-w-4xl mx-auto p-8">
    <h1 class="text-3xl font-bold text-gray-800 mb-4">Welkom bij Tailwind CSS!</h1>
    <p class="text-gray-600 mb-6">Dit is een paragraaf die is opgebouwd met behulp van een utility-class.</p>
    <button class="px-6 py-3 bg-blue-500 hover:bg-blue-700 text-white font-semibold rounded-lg shadow transition duration-200">
      Klik op mij
    </button>
  </div>
</body>
</html>

Responsive design en interactieve gebruikersomgevingen

Tailwind biedt een krachtig responsief ontwerpssysteem en verschillende varianten van de gebruikersinterface aan, waardoor het veel eenvoudiger is om om te gaan met verschillende schermgrootten en gebruikersinteracties.

Responsive breakpoints

Tailwind biedt standaard vijf responsieve prefixen voor breakpoint-definities aan:sm:, md:, lg:, xl:, 2xl:Deze prefixen kunnen worden toegepast op bijna alle soorten utiliteiten om een mobielvriendelijk en responsief ontwerp te realiseren.

Aanbevolen leesmateriaal Een responsief website bouwen vanaf nul: een praktische gids met Tailwind CSS en alle belangrijke technieken。

<div class="text-center sm:text-left md:text-center lg:text-right">
  <!-- 在超小屏幕上居中，小屏幕上左对齐，中等屏幕上再居中，大屏幕上右对齐 -->
  Responsive text alignment
</div>
<img class="w-16 h-16 md:w-24 md:h-24 lg:w-32 lg:h-32" src="avatar.jpg">

Je kunt... tailwind.config.js 的 theme.screens De waarden van deze pauzepunten kunnen in sommige gevallen volledig worden aangepast.

Status en pseudoklasenvarianten

Tailwind gebruikt prefixen om klassen verschillende staten te geven, bijvoorbeeld wanneer ze worden overgedragen (hover).hover:focus, concentrationfocus:), activeren (active:Dit maakt het mogelijk om stijlen toe te voegen aan interactieve elementen zonder dat er extra CSS hoeft te worden geschreven.

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.

<button class="bg-green-500 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-opacity-50 ...">
  交互按钮
</button>

Naast de bekende pseudoklassen ondersteunt Tailwind ook groepen met specifieke statussen (zoals…) group-hover:), de status van formulierelementen (bijvoorbeeld checked:、disabled:) en mediavraagstukken, zoals het donkere modus (dark:De donkere modus kan worden ingesteld door… tailwind.config.js Maak een nieuwe map in de app Instellingen. darkMode: 'class' 或 darkMode: 'media' Om dit te activeren, moet je het eerst inschakelen en vervolgens het op de HTML-element toevoegen. class="dark" Of het is afhankelijk van de systeemvoorkeurinstellingen.

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <!-- 浅色模式下白底黑字，深色模式下灰底亮字 -->
  Example van donkere modus
</div>

Advanced features en beste praktijken

Naarmate het project groter wordt, is het handig om enkele geavanceerde functies en beste praktijken te beheersen, zodat je Tailwind nog efficienter kunt gebruiken.

Componenten extraheren en gebruiken met @apply

Hoewel 'utility-first' de kernfilosofie is, biedt Tailwind een oplossing om te voorkomen dat je in HTML een lange reeks dezelfde klassen hoeft op te schrijven. @apply Deze instructie geeft je toestemming om in je eigen CSS-klassen een groep handige functies (of “utility classes”) te kunnen toevoegen.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow;
}
.btn-primary:hover {
  @apply bg-blue-700;
}

En daarna kun je dit gebruiken in HTML. class="btn-primary"Er wordt echter door de autoriteiten geadviseerd om deze functie met voorzichtigheid te gebruiken, en alleen voor het extraheren van stijlfragmenten die daadwerkelijk meerdere keren in het project voorkomen en die niet goed kunnen worden uitgedrukt met atoomklassen. Overmatig gebruik kan ongewenste gevolgen hebben. @apply We zouden terugkeren naar de oude manier van schrijven in traditioneel CSS, waardoor we enkele voordelen van programmaatiespecifieke functies zouden verliezen.

Optimaliseren van de grootte van de productieomgeving

In de ontwikkelingsomgeving genereert Tailwind een enorm CSS-bestand dat alle mogelijke klassen bevat. Voor de productieomgeving is het echter van belang om ongebruikte stijlen te verwijderen. Dit kan worden gerealiseerd door het juist instellen van de configuratie. tailwind.config.js De Chinese versie van dit bericht is niet beschikbaar. content Tailwind kan de bestanden van je project (HTML, JSX, Vue, Blade-templates, etc.) statisch analyseren en alleen de klassen behouden die daadwerkelijk worden gebruikt.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
    './public/index.html',
  ],
  // ...
}

Tijdens het bouwen van de productieversie worden de CLI (Command Line Interface) van Tailwind of de PostCSS-plugin gebruikt om een “tree shaking”-optimalisatie uit te voeren, gebaseerd op deze configuratie. Het resultaat is een CSS-bestand dat meestal slechts enkele KB tot enkele tientallen KB groot is, waardoor de efficiency zeer hoog is.

Gebruik officiële plugins en community-resources.

Tailwind beschikt over een actief ecosysteem. Er zijn officiële plugins beschikbaar om de mogelijkheden van Tailwind te uitbreiden. @tailwindcss/forms(Betere vormgeving van het formulier)@tailwindcss/typography(Gebruikt voor het weergeven van een mooi ontwerp in tekstformaten als Markdown) en @tailwindcss/line-clamp(Dit wordt gebruikt om meerdere regels tekst af te snijden.) Je kunt ze installeren met npm en registreren in je configuratiebestand.

Daarnaast biedt de community een groot aantal componentenbibliotheken (zoals Headless UI, DaisyUI), templates en tools aan, waardoor de ontwikkelingsprocess verder kan worden versneld. De belangrijkste tip blijft echter om eerst de basisprincipes en praktische programmaonderdelen goed te begrijpen.

Samenvatting

Tailwind CSS heeft de manier waarop front-end-developers stijlen schrijven drastisch veranderd, dankzij zijn unieke en praktische methodologie. Het biedt een set zeer aanpasbare, combinerbare atoomklassen, waardoor beslissingen over stijl worden verplaatst van de CSS-bestanden naar de HTML-templates. Dit resulteert in een snellere ontwikkeling, betere onderhoud en meer consistentie in het design. Van het opzetten van de omgeving, het begrijpen van de kernconcepten tot het maken van responsieve designs en het beheersen van de staat van de applicatie, en het bepalen van de grootte van de geproduceerde code door configuratie en optimalisatie – het beheersen van deze werkwijze geeft je de mogelijkheid om moderne, responsieve webinterfaces te bouwen. Hoewel het in het begin nodig is om enkele klassenamen te onthouden, zijn de langtermijnvoordelen en de verbetering van de ontwikkelingservaring enorm.

Veelgestelde vragen (FAQ)

Wat zijn de belangrijkste verschillen tussen Tailwind CSS en Bootstrap?

Tailwind CSS is een framework waarbij functionaliteit voorop staat. Er worden geen vooraf gemaakte visuele componenten (zoals navigatiebalken of kaarten in bepaalde stijlen) geleverd, maar alleen basisklassen (‘atom classes’) die kunnen worden gebruikt om deze componenten te bouwen. Het accent ligt op flexibiliteit en personalisatie.

Bootstrap is een framework waarbij componenten voorop staan. Het biedt een reeks geheel ontworpen en standaardgestileerde componenten die je snel kunt gebruiken door ze te voorzien van de juiste klassennamen. Bootstrap legt nadruk op gebruiksgemak en consistentie, maar soms is het nodig om de standaardstijlen aan te passen om ze te laten passen bij je eigen ontwerp.

Zorgt het schrijven van veel klassennamen in HTML voor een verwarrend codebestand?

Dit is inderdaad een veel voorkomend probleem. Uit de praktijk blijkt dat, ondanks het toenemende aantal klassennamen in HTML, de leesbaarheid van het codebestand zelfs kan verbeteren. Je kunt namelijk direct zien welke stijlen (bijvoorbeeld afstand en kleur) op een element zijn toegepast, zonder dat je heen en weer hoeft te bladeren tussen de CSS- en HTML-bestanden om dit te vinden. Voor zeer complexe componenten kun je de mogelijkheden van frameworks als Vue of React gebruiken om deze componenten te verpakken, of je moet deze componenten met zorg gebruiken. @apply Extract duplicate style combinations from the instructions.

Is Tailwind geschikt voor grote projecten?

Uitstekend! De personalisatie mogelijkheden van Tailwind maken het mogelijk om al in de beginfase van een project een compleet designsysteem (kleuren, ruimtes, fonten, etc.) vast te stellen, waardoor de designconsistentie binnen het hele team wordt gewaarborgd. De tools voor het optimaliseren van de productieomgeving zorgen ervoor dat het uiteindelijke CSS-bestand zeer compact is. Veel grote bedrijven (zoals GitHub, Netflix en Shopify) gebruiken Tailwind CSS in hun productieomgeving.

Hoe voeg je eigen stijlen of klassen toe aan Tailwind?

Er zijn voornamelijk drie manieren. De eerste manier is door te bewerken… tailwind.config.js Het is de meest aanbevolen manier om het thema te uitbreiden met bestanden: bijvoorbeeld door nieuwe kleuren, ruimtes of pauzes toe te voegen. De tweede optie is om dit te doen in het CSS. @layer Een instructie om een aangepaste stijl toe te voegen aan Tailwind. base, components 或 utilities De derde optie is om een gewone CSS-fail te schrijven en deze vervolgens te gebruiken. @import De functie wordt wel geïntroduceerd, maar op deze manier kun je de optimalisaties van Tailwind niet gebruiken.

Is de leercurve voor Tailwind CSS erg steil?

Voor ontwikkelaars die al vertrouwd zijn met CSS is de inleiding relatief gemakkelijk. Wat je moet leren, zijn de namenconventies van Tailwind. m-4 Vertegenwoordigt de margin.p-2 Het gaat om het gebruik van padding (ruimte tussen elementen) en hoe deze te combineren, in plaats van het toevoegen van nieuwe CSS-attributen. De officiële documentatie is zeer goed en bevat ook een zoekfunctie voor alle beschikbare klassen. Zodra je de kernfuncties van deze klassen onder de knie hebt, zal je ontwikkelingsefficiëntie aanzienlijk verbeteren.