Tailwind CSS: Een introductie en praktische handleiding om vanaf nul moderne, responsieve webinterfaces te bouwen

Wat is Tailwind CSS?

Tailwind CSS is een CSS-framework dat focus legt op functionaliteit. Het biedt een groot aantal ondersteunende, praktische klassen, waarmee je snel een aangepaste design kunt bouwen. In tegenstelling tot frameworks zoals Bootstrap, die vooraf gedefinieerde componenten (zoals knoppen en kaarten) bieden, biedt Tailwind de “atoomklassen” die nodig zijn om deze componenten te creëren – bijvoorbeeld klassen voor het bepalen van de marginaalafstanden. p-4De tekstkleur kan worden beheerd met... text-blue-500 En om de lay-out van flexibele boxes (elastic boxes) te beheersen… flexDe kernidee van deze methode is dat de stijl direct in het HTML wordt opgenomen. Dit zorgt voor een aanzienlijke verbetering van de ontwikkelingsefficiëntie en behoudt tevens de hoogte van de designconsistentie.

De kern van het werkingssysteem is...

De kern van Tailwind is een PostCSS-plugin dat is geschreven in JavaScript (Node.js). Tijdens het bouwproces scannt het de bestanden van je project op en vindt alle gebruikte praktische klassen. Vervolgens worden alleen deze gebruikte CSS-stijlen opgenomen in het uiteindelijke CSS-bestand voor de productieomgeving. Dit proces heet “tree shaking” en zorgt ervoor dat het gecreëerde CSS-bestand zo klein mogelijk is, waardoor er geen redundantie meer is zoals bij traditionele CSS-frames waarbij de hele bibliotheek moet worden ingevoerd. tailwind.config.js In deze configuratiebestand zijn alle designparameters vastgesteld, zoals de kleuren van het aangepaste thema, de verhoudingen tussen verschillende onderdelen van het ontwerp en de posities van de brekpunten (breakpoints).

Hoe je Tailwind CSS gaat gebruiken

Er zijn verschillende manieren om met Tailwind CSS te gaan werken, waarvan de meest aanbevolen methoden zijn het gebruik van het officiële CLI-hulpmiddel of integratie met front-end bouwtools. Hier wordt de standaardproces beschreven voor integratie met npm en PostCSS; dit zorgt ervoor dat je de meest complete functionaliteiten en de beste prestaties in je project krijgt.

Aanbevolen leesmateriaal Ultimate Guide to Tailwind CSS: Build Modern Interfaces from Scratch。

Allereerst moet je een project initialiseren en Tailwind CSS samen met de vereiste afhankelijkheden installeren via npm.

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 →

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

Na het installeren krijgt u een… tailwind.config.js File. Je moet deze file bewerken. content Je gebruikt velden om aan te geven welke bestanden Tailwind moet scannen op zoek naar de namen van de klassen die worden gebruikt. Dit zijn meestal je HTML-templates, JavaScript-componenten en dergelijke.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Volgens de opgegeven instructies moet je nu een hoofd-CSS-bestand maken (bijvoorbeeld: `main.css`). src/input.css), en introduceer de instructies van Tailwind.

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

Ten slotte moet je de build-proces configureren. Als je een tool gebruikt als Vite, moet je ervoor zorgen dat de PostCSS-configuratie correct is ingesteld. Maak een… postcss.config.js Het document.

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

Nu kun je de build-command uitvoeren (bijvoorbeeld)... npm run buildHet hangt af van de configuratie van je script, maar Tailwind zal je CSS-bestanden verwerken en de uiteindelijke stijl genereren. Daarna kun je in je HTML-code de praktische klassen van Tailwind gebruiken.

Aanbevolen leesmateriaal Tailwind CSS in de praktijk: een handig gids van het begin tot de volle omvang en beste praktijken。

Core utility classes en responsief ontwerp

De praktische klassen van Tailwind dekken alle aspecten van CSS af: van het lay-out, de ruimtes tussen elementen en de typografie tot de achtergrond, randen en effecten. Het designsysteem van Tailwind is zeer consistent; bijvoorbeeld worden voor de ruimtes tussen elementen altijd dezelfde verhoudingen gebruikt (mogelijkheden van het type 0,25rem), en er is een vooraf bepaald palet met kleuren beschikbaar.

Layout- en ruimteklasse

Layoutklassen zoals flex, grid, block, inline-block Het kan direct worden gebruikt. De afstand wordt bepaald door… p-{size}(Margin) en m-{size}Je kunt de marginaalinstellingen gebruiken om dingen te beheersen, bijvoorbeeld… p-4 Dit betekent een margin van 1 rem.mt-2 Dit betekent een bovenmarge van 0,5 rem.

<div class="flex p-4 space-x-4">
  <div class="p-2 bg-gray-200">Project 1</div>
  <div class="p-2 bg-gray-200">Project twee</div>
</div>

Responsive breakpoint prefix

Een van de sterke punten van Tailwind is zijn responsieve design. Er zijn vijf standaardbrekpunten (breakpoints) ingebouwd:sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Door voor de praktische klassen een prefix te voegen, kun je eenvoudig een responsief ontwerp creeren. Bijvoorbeeld:md:flex Dit betekent dat er een flexibele lay-out wordt gebruikt op schermen van gemiddelde grootte of groter.text-center lg:text-left Het betekent dat de tekst standaard in het midden wordt weergegeven, maar op grotere schermen links wordt uitgelijnd.

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.

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4">De inhoud aan de linkerkant.</div>
  <div class="w-full md:w-1/2 p-4">De inhoud aan de rechterkant</div>
</div>

Praktijk: Een responsieve navigatiebalk bouwen

Laten we de geleerde kennis toepassen door een veelgebruikte responsieve navigatiebalk te bouwen. Op grote schermen wordt deze navigatiebalk horizontaal weergegeven, terwijl ze op kleine schermen wordt opgevouwen tot een hamburgermenu.

Eerst maken we de horizontale navigatiestructuur voor op grote schermen.

<nav class="bg-gray-800 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <!-- 品牌 Logo -->
    <a href="#" class="text-white text-xl font-bold">Mijn merk</a>
    <!-- 桌面端导航链接 -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-300 hover:text-white">Homepage</a>
      <a href="#" class="text-gray-300 hover:text-white">Over</a>
      <a href="#" class="text-gray-300 hover:text-white">service</a>
      <a href="#" class="text-gray-300 hover:text-white">Contact</a>
    </div>
    <!-- 移动端菜单按钮 -->
    <button id="menuBtn" class="md:hidden text-white">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">...</svg>
    </button>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobileMenu" class="md:hidden hidden mt-2">
    <a href="#" class="block text-gray-300 hover:text-white py-2">Homepage</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">Over</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">service</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">Contact</a>
  </div>
</nav>

Interactieve functies toevoegen

De bovenstaande HTML-structuur wordt gebruikt om… hidden 和 md:flex Dergelijke klassen bieden een responsief ontwerp. Om op mobiele apparaten het menu aan/uit te schakelen, hebben we een simpel stukje JavaScript nodig.

Aanbevolen leesmateriaal The Ultimate Tailwind CSS Guide: A Practical Tutorial from Beginner to Expert。

// 简单的菜单切换逻辑
document.getElementById('menuBtn').addEventListener('click', function() {
  const menu = document.getElementById('mobileMenu');
  menu.classList.toggle('hidden');
});

Dit voorbeeld laat zien hoe je met alleen maar praktische klassen van Tailwind en een eenvoudige JavaScript-functie snel een functioneel en professioneel uitziend responsief component kunt bouwen. Je kunt het uiterlijk eenvoudig aanpassen om het te laten passen bij je merkdesign door de achtergrondkleur, ruimte tussen elementen en hover-effecten te veranderen.

Samenvatting

Tailwind CSS heeft de manier waarop front-end-developers stijlen schrijven volledig veranderd, dankzij zijn functionele en praktische klassenmethodologie. Het elimineert de kosten van het frequente wisselen van context tussen HTML- en CSS-bestanden, zorgt voor een consistente gebruikersinterface (UI) door een strak ontwerpssysteem en biedt dankzij geavanceerde optimalisaties tijdens het bouwen van de applicatie een hoge prestatie. Of je nu een simpel prototype of een complexe bedrijfsapplicatie ontwikkelt: Tailwind biedt een uitstekend ontwikkelingservaring en onderhoudsgemak. Door de kernprincipes van Tailwind te begrijpen, de gebruikersvriendelijke prefixen en de configuratiemethoden te beheersen, kun je je front-end-ontwikkelingsefficiëntie en je mogelijkheden om designs te realiseren aanzienlijk verbeteren.

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.

Veelgestelde vragen (FAQ)

Zijn de CSS-bestanden die met Tailwind CSS worden gegenereerd erg groot?

Nee, dat is juist de schittering van Tailwind Design. Tijdens de productie- en bouwfasen gebruikt Tailwind PurgeCSS (die nu is geïntegreerd in de engine) om onnodige CSS-klassen te verwijderen. PurgeCSS houdt alleen de CSS-klassen over die daadwerkelijk worden gebruikt in HTML-, JavaScript- en andere templatebestanden. Het uiteindelijke CSS-bestand weegt meestal enkele KB tot enkele tientallen KB, waardoor het veel kleiner is dan veel traditionele CSS-frames.

Zal het schrijven van zoveel klassennamen in HTML de code moeilijker maken om te lezen en te onderhouden?

Dit is inderdaad een veel voorkomende vrees in het begin. Uit praktijk blijkt dat het plaatsen van stijlen en structuur in de buurt van elkaar de cognitieve belasting om stijlen te vinden en te bewerken vermindert. Voor complexe componenten kun je Tailwind gebruiken. @apply De instructies bevatten tips om gebruikelijke, praktische klassen uit te halen en deze in het CSS op te nemen, waardoor er zelfgemaakte componentklassen kunnen worden gecreëerd. Daarnaast kunnen goede editorextensies (zoals Tailwind CSS IntelliSense) automatische suggesties en een voorverbeelding van de componenten bieden wanneer de gebruiker met de muis over de klassen heen beweegt, waardoor de ontwikkelingservaring aanzienlijk wordt verbeterd.

Welke JavaScript-frames werken goed samen met Tailwind CSS?

Tailwind CSS is framework-onafhankelijk en past perfect bij elke front-end framework of library. Het wordt zeer goed ondersteund en er is een grote community die het gebruikt, zowel in React, Vue.js, Angular, Svelte als in traditionele statische website-generatoren zoals Next.js, Nuxt.js, Gatsby en Hugo. De werkwijze van Tailwind CSS (bestanden scannen en stijlen genereren) kan naadloos worden geïntegreerd in de build-tools van deze frameworks.

Hoe kun je het standaardthema van Tailwind Customiseren, bijvoorbeeld door de kleuren van je merk te gebruiken?

Custom themes worden voornamelijk gemaakt door te bewerken de bestanden in de rootdirectory van het project. tailwind.config.js Het kan worden afgerond met een configuratiebestand. Je kunt... theme.extend Voeg waarden toe aan het object of overschrijf de standaardwaarden. Als je bijvoorbeeld een eigen merkkleur wilt toevoegen, kun je dit op de volgende manier instellen:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      }
    }
  }
}

Nadat de configuratie is voltooid, kun je deze gebruiken in het project. bg-brand-blue 或 text-brand-blue Zo'n klasse. Alle belangrijke afmetingen, fonten, brekpunten en dergelijke kunnen op vergelijkbare manier worden aangepast.