In deze handleiding leert u stap voor stap hoe u met Tailwind CSS moderne, responsieve webpagina's snel kunt bouwen.

Tailwind CSS is een CSS-framework dat focus legt op functionaliteit. Het biedt een groot aantal combinabele en praktische klassen, waardoor ontwikkelaars eenvoudig en snel een aangepaste design kunnen bouwen in HTML. In tegenstelling tot frameworks zoals Bootstrap, die vooraf gedefinieerde componenten bieden, geeft Tailwind CSS je volledige controle. Je kunt unieke gebruikersinterfaces creeren door deze detailgerichte klassen te combineren, zonder dat je zelf custom CSS hoeft te schrijven. Deze “atomarische” benadering van CSS zorgt voor een grote verbetering in de ontwikkelingsefficiëntie en behoudt tegelijkertijd de consistentie van de stijl.

Waarom kiezen voor Tailwind CSS?

Van de vele CSS-frames stekt Tailwind CSS uit, vooral dankzij zijn unieke designfilosofie en de goede ontwikkelingservaring die het biedt.

Uiterst hoge ontwikkelingsefficiëntie

Met Tailwind CSS hoeft u niet heen en weer te schakelen tussen HTML- en CSS-bestanden. Alle stijlen worden rechtstreeks op HTML-elementen toegevoegd via klassennamen. Als u bijvoorbeeld een knop wilt maken met een binnenruimte, een blauwe achtergrond en ronde hoeken, hoeft u alleen maar de juiste klassen te gebruiken. <button class="px-4 py-2 bg-blue-500 rounded-lg">按钮</button>Deze werkwijze elimineert de cognitieve belasting van het geven van namen aan klassen en het vinden van corresponderende CSS-regels, waardoor het bouwen van interfaces net zo snel en intuïtief wordt als het bouwen met bouwstenen.

Aanbevolen leesmateriaal Leren Tailwind CSS: van nul beginnen met het bouwen van moderne, responsieve webpagina's。

Ingebouwde ondersteuning voor responsief ontwerp

Het maken van responsieve webpagina's is een sterke punt van Tailwind CSS. Het framework bevat ingebouwde responsieve prefixen die zijn gebaseerd op veel voorkomende scherpteniveaus (breakpoints). sm:、md:、lg:、xl: 和 2xl:Je kunt deze prefixen toevoegen aan elke gebruikersklasse om aan te geven dat de betreffende stijl alleen op bepaalde schermbreedten wordt toegepast. Dit maakt het zeer eenvoudig om complexe responsieve lay-outs te creeren, en de code blijft daardoor duidelijk en gemakkelijk te begrijpen.

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 →

Uitstekende mogelijkheden voor personalisatie

Hoewel Tailwind een groot aantal standaardinstellingen biedt, zijn deze zeker niet onveranderlijk. Dit kan worden gewijzigd door... (The text seems incomplete here; the translation will be continued based on the remaining information.) tailwind.config.js In de configuratiebestanden kun je alles op maat instellen: kleuren, afstanden, fonten, brekpunten, enzovoort. Dit betekent dat je Tailwind kunt aanpassen zodat het perfect past bij je eigen ontwerpssysteem, in plaats van dat je je ontwerp moet aanpassen aan het framework.

Uitstekende productieprestaties

Tailwind CSS gebruikt PurgeCSS; dit is sinds Tailwind CSS versie 2.1+ standaard ingebouwd. purge Je kunt gebruikmaken van deze optie om je HTML-, JavaScript-componenten en alle templatebestanden te scannen, waarna alle ongebruikte CSS-elementen automatisch worden verwijderd. Dit zorgt ervoor dat het CSS-bestand in het eindresultaat (de productieomgeving) zeer klein is; meestal slechts enkele duizend bytes in omvang. Hierdoor wordt de laadtijd van de pagina aanzienlijk verbeterd.

Omgeving opzetten en project initialiseren

Er zijn verschillende manieren om met Tailwind CSS te gaan werken, maar het meest aanbevolen is om dit te integreren via het PostCSS-plugin. Dit zorgt voor de beste prestaties en een optimale ontwikkelingservaring.

Installeer via npm.

Eerst moet je met npm of yarn een project initialiseren en Tailwind CSS samen met de vereiste afhankelijkheden installeren.

Aanbevolen leesmateriaal Leren Tailwind CSS: van nul beginnen met het bouwen van moderne, responsieve websites。

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

npx tailwindcss init Het commando zal een standaardversie van het object of de functie creëren. tailwind.config.js Configuratiebestand.

PostCSS configureren

Maak een map in de rootdirectory van het project. postcss.config.js Deze bestanden worden gebruikt om Tailwind CSS en Autoprefixer als plugins toe te voegen.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Tailwind CSS introduceren

Maak een CSS-bestand, bijvoorbeeld... src/styles.cssEn gebruik… @tailwind Deze instructie wordt gebruikt om de basisstijlen, componentklassen en toolklassen van Tailwind CSS in te injecteren.

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.

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

Ten slotte moet je deze gecompileerde CSS-bestand in je HTML-bestand invoegen, of het importeren in je hoofd-JavaScript-bestand (indien je build-tools gebruikt zoals webpack of Vite).

Gids voor het gebruik van kernfuncties en praktische klassen

De praktische klassen van Tailwind CSS dekken bijna alle CSS-attributen af. Het is belangrijk om de nameregels ervan te begrijpen om het systeem efficiënt te kunnen gebruiken.

Layout en ruimte tussen elementen

De klassen die het lay-out en de afstanden beheersen, zijn zeer intuïtief te gebruiken. Bijvoorbeeld…flex、grid Verwend voor het opmaken van lay-outmodellen;m-4 Dit betekent dat de buitenmarge (margin) 1 rem is.p-4 Dit betekent dat de binnenruimte (padding) 1 rem is. De richting van de binnenruimte kan worden bepaald door… t(Boven)r(Right)b(onder)l(Links)x(Horizontaal)yOm dit aan te geven, wordt bijvoorbeeld gebruik gemaakt van een verticale richting… mt-2、px-4。

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

Kleur en achtergrond

De namen van kleurklassen bestaan meestal uit een prefix voor de eigenschap en de kleurwaarde. Voorbeeld:bg-gray-100 De achtergrondkleur instellen,text-blue-600 Textkleur instellenborder-red-300 Stel de kleur van de rand in. Naarmate de cijfers groter zijn, wordt de kleur meestal donkerder. Je kunt ook je eigen kleurpalet instellen in de configuratiebestand.

Layout en afmetingen

Om de tekststijl te bepalen, wordt gebruik gemaakt van... text-{size}(zoals) text-lg）、font-{weight}(zoals) font-boldOm de afmetingen te bepalen, wordt gebruik gemaakt van... w-(Breedte) en h-Prefix voor 'hoogte', bijvoorbeeld w-64 Dit betekent dat de breedte 16 rem is.

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.

Responsive en interactieve status

Als eerder gezegd, hoef je alleen maar een responsief prefix toe te voegen. Daarnaast biedt Tailwind ook verschillende varianten van de status (status variants) aan. hover:、focus:、active:Zo kun je eenvoudig de interactieve staat van elementen definiëren. Voorbeeld:hover:bg-blue-700 De achtergrondkleur verandert wanneer de muis erover wordt gehouden.

Een responsief navigatiebord maken

Laten we de bovenstaande kennis in praktijk brengen door een simpele responsieve navigatiebalk te bouwen. Op grote schermen wordt deze navigatiebalk horizontaal weergegeven, terwijl ze op kleine schermen wordt opgevouwen tot een hamburgermenu.

Opbouw van de HTML-structuur

Eerst maken we de basis van de HTML-structuur voor de navigatiebalk.

<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 左侧Logo和品牌 -->
      <div class="flex items-center">
        <div class="text-white font-bold text-xl">Mijn merk</div>
        <!-- 桌面端导航链接 -->
        <div class="hidden md:block ml-10">
          <div class="flex space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Homepage</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Over</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">service</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Contact</a>
          </div>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="text-gray-400 hover:text-white">
          <!-- 汉堡菜单图标 (简化版) -->
          <span class="block w-6 h-0.5 bg-white mb-1"></span>
          <span class="block w-6 h-0.5 bg-white mb-1"></span>
          <span class="block w-6 h-0.5 bg-white"></span>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 (默认隐藏) -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">Homepage</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">Over</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">service</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">Contact</a>
    </div>
  </div>
</nav>

Stijl- en responsieve logica-analyse

In dit voorbeeld hebben we meerdere belangrijke klassen gebruikt:
* hidden md:blockDe navigatie-linkcontainer op de desktop wordt standaard op mobiele apparaten verborgen en wordt alleen weergegeven op schermen van middelgrote afmeting (md) of groter.
* md:hiddenMenubuttons op mobiele apparaten worden op schermen van gemiddelde grootte en groter verborgen.
* flex、justify-between、items-centerGebruik Flexbox voor een horizontale lay-out en alignering.
* max-w-7xl mx-autoZorg ervoor dat de navigatieinhoud centraal wordt weergegeven en beperk de maximale breedte ervan.
* hover:bg-gray-700Definieer de status wanneer de muis over een object wordt gehouden.

Om de schakeling van het mobiele menu te realiseren, heb je extra JavaScript nodig. id="mobile-menu" Op de div... hidden Deze klassen laten zien hoe Tailwind naadloos samenwerkt met JavaScript.

Samenvatting

Tailwind CSS heeft onze manier van CSS schrijven volledig veranderd door het toepassen van het concept van ‘use-first’. Het verplaatst de beslissingen over het uiterlijk van de website van de style sheets naar het markup-systeem, waardoor er een enorm snellere ontwikkelingsgang wordt gerealiseerd, een consistente design-structuur wordt behouden en de afmetingen van de geproduceerde bestanden worden verminderd. In het begin moet je enkele klassennamen onthouden, maar eenmaal vertrouwd met het namensysteem, wordt het bouwen van responsieve en esthetisch aantrekkelijke websites ongekend efficiënt. Tailwind CSS is een krachtig hulpmiddel, geschikt voor zowel startende projecten als grote bedrijfsapplicaties, en is de moeite waard om goed te leren.

Veelgestelde vragen (FAQ)

Zorgt Tailwind CSS ervoor dat het HTML-ontwerp er onnodig complex of ‘onzorgvuld’ uit komt?

Ja, inderdaad worden er meer klassennamen toegevoegd aan HTML-elementen wanneer je Tailwind CSS gebruikt. Dit wordt echter meestal gezien als een goede afweging. Je krijgt een snellere ontwikkelingsgang, de gemakkelijkheid om elementen niet te hoeven benoemen, en een CSS-bestand dat niet oneindig groot wordt. Veel ontwikkelaars vinden dat het gemakkelijker te onderhouden is om alle stijlen direct in het HTML te zien, in plaats van tussen meerdere bestanden heen te moeten bladeren om ze te vinden.

Hoe kun je eigen stijlen overschrijven of toevoegen?

Er zijn twee belangrijke manieren. In de eerste plaats, je kunt... tailwind.config.js De documenten van theme.extend Deze uitbreidingen passen standaard thema's aan, bijvoorbeeld door nieuwe kleuren of ruimteafstanden toe te voegen. Verder kun je voor geheel customiseerde, eenmalige stijlen gebruikmaken van je CSS-bestand. @tailwind utilities; Na de instructies kun je de traditionele CSS-code schrijven, of je kunt gebruikmaken van Tailwind CSS. @apply In CSS worden instructies gebruikt om inline utility-classen toe te voegen.

Welke front-end frameworks zijn geschikt om te gebruiken met Tailwind CSS?

Tailwind CSS is zeer goed te integreren met alle populaire front-end frameworks en bibliotheken, zoals React, Vue.js, Angular en Svelte. De ontwikkelaars bieden ook speciale tools en plugins aan voor React en Vue. @headlessui/react Tailwind CSS biedt headless UI-componenten aan. In meta-frameswerken zoals Next.js en Nuxt.js wordt Tailwind ook vaak het favoriete stijlframework.

Hoe kun je de grootte van Tailwind CSS optimaliseren in een productieomgeving?

De optimalisatie wordt automatisch uitgevoerd. Je moet… tailwind.config.js De configuratie in het bestand is correct. content Optionen (in de oude versie) purgeVul de path in waar je HTML-, template- en JavaScript-bestanden zijn opgeslagen. Tijdens het bouwen van de productieversie analyseert Tailwind deze bestanden en pakketteert alleen de gebruikte stijlklassen op in het uiteindelijke CSS-bestand, waardoor er een zeer klein bestand wordt gecreëerd.