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

Wat is Tailwind CSS?

In de traditionele CSS-ontwikkeling zijn we gewend om semantische klassenamen te definiëren voor pagina-elementen en de specifieke stijlregels in een aparte stijlboom te opschrijven. Dit leidt vaak tot veel heen-en-weer tussen HTML- en CSS-bestanden, en naarmate het project groter wordt, kan de stijlboom onhandig om te onderhouden worden.Tailwind CSS Er werd dan een geheel andere benadering gekozen, gebaseerd op het principe “functie eerst” (‘functionality first’). Dit houdt in dat er een atomair CSS-framework werd gebruikt. Dit framework biedt een groot aantal gedetailleerde en herbruikbare toolklassen aan, waarmee ontwikkelaars direct in HTML of JSX elke gewenste design kunnen bouwen door deze klassen te combineren.

De belangrijkste troef is dat het afhankelijkheid van aangepaste CSS-gegevens wegneemt. Je hoeft geen moeite meer te doen met het bedenken van klassennamen voor knoppen, kaarten of navigatiebalken, en hoeft ook geen zorgen te maken over stijlconflicten. Als je bijvoorbeeld een knop wilt maken met ronde hoeken, een blauwe achtergrond, witte tekst en interne marginen, hoef je alleen maar dit te schrijven:<button class=“rounded bg-blue-500 text-white p-4”>按钮</button>Deze manier van ontwikkelen verbetert de snelheid en consistentie van het bouwen van gebruikersinterfaces aanzienlijk. Met tools als PurgeCSS (die in Tailwind v3 en hogere versies is opgenomen als optimalisatie-engine) kunnen ongebruikte stijlen automatisch worden verwijderd, waardoor het uiteindelijke CSS-bestand zeer compact wordt.

Hoe je Tailwind CSS gaat gebruiken

Ga aan de slag Tailwind CSS Er zijn verschillende manieren om dit te doen; de meest voorkomende zijn via het officiële CLI-hulpmiddel of door integratie met front-end-building-tools.

Aanbevolen leesmateriaal Het beginnersgids voor Tailwind CSS: van nul naar een moderne, responsieve interface。

Snel installeren met npm en CLI

De meest aanbevolen manier is om Tailwind via npm te installeren en vervolgens de command-line-tool te gebruiken voor initialisatie. Eerst moet je in de rootdirectory van je project de volgende commando’s uitvoeren in de terminal om Tailwind en zijn afhankelijkheden te installeren:

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 install -D tailwindcss
npx tailwindcss init

De eerste opdracht zal… tailwindcss Installeer als ontwikkelingsafhankelijkheid. De tweede opdracht genereert een standaardconfiguratiebestand. tailwind.config.jsDeze file is het hartstuk van je aangepaste Tailwind-thema: hier worden plugins toegevoegd en de Purge-paden worden ingesteld.

Het instellen van de configuratiebestand van Tailwind

Genererend... tailwind.config.js De initial content van het bestand is erg simpel. Om zeker te stellen dat Tailwind je HTML-bestand kan scannen en ongebruikte stijlen kan verwijderen, moet je dit bestand configureren. content Velden. In een typisch Vue- of React-project kan de configuratie er als volgt uitzien:

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

Deze configuratie instrueert Tailwind om te scannen. src Alle bestanden in de map met de aangegeven extensie worden gevonden, en uit deze bestanden worden de gebruikte toolklassen extrahéérd.

Basistijlen invoeren in het project

Nadat je Tailwind hebt geïnstalleerd en geconfigureerd, moet je de verschillende componenten van Tailwind toevoegen aan het CSS-bestand in de wortelmap (root directory) van het project. Meestal maak je een bestand met de naam `tailwind.css`. src/styles.css 或 src/index.css De bestand... en voeg de volgende instructies toe:

Aanbevolen leesmateriaal Tailwind CSS leren kennen: een praktische handleiding om het van beginner tot expert te beheersen.。

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

@tailwind base Er worden de basisstijlen van Tailwind ingevoerd, waardoor de standaardstijlen worden hersteld en een consistente basis wordt gecreëerd.@tailwind components Er worden componenten van Tailwind (zoals containers) en andere componenten die jij zelf hebt gemaakt, ingevoerd. @apply De componentklasse voor het registreren van instructies.@tailwind utilities Dit betekent dat alle functionaliteiten zijn geïnstalleerd; dit is de meest essentiële fase.

Ten slotte moet je ervoor zorgen dat je build-proces (bijvoorbeeld met Vite of Webpack) deze CSS-bestand kan verwerken, of dat je dit kan doen met CLI-commando's. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Deze tekst wordt in real time gecompileerd.

Uitleg over de belangrijkste functionaliteitenklassen van Tailwind CSS

Tailwind CSS De toolklasse dekt alle CSS-eigenschappen af, zoals lay-out, ruimte tussen elementen, typografie, kleuren, randen en effecten. De namengeving is zeer intuïtief en volgt meestal een bepaald patroon. 属性{方向？}-{尺寸} Het model...

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.

Afstand en maatbeheer

Tailwind gebruikt een uniform systeem van numerieke verhoudingen om marginaalafstanden, breedte en hoogte te bepalen.p-4 Exprimeer padding: 1rem(De standaard is dat 1 eenheid = 0.25rem is.)m-2 Exprimeer margin: 0.5remJe kunt het gebruiken. px-、py-、pt-、pr- Voor het specificeren van een specifieke richting worden voorvoegsel gebruikt. Wat betreft de maten…w-64 Exprimeer width: 16rem，h-screen Exprimeer height: 100vhDankzij deze consistentie wordt het instellen van de afstanden en het aligneren van de interface-elementen uiterst eenvoudig en geordend.

Kleuren en achtergrondstijlen

Tailwind biedt een goed ontworpen palet aan kleuren, waarbij elke kleur beschikbaar is in verschillende schaduwen (van 50 tot 900). Dit wordt gerealiseerd met klassennamen als… text-blue-600(tekstkleur)bg-gray-100(Grondkleur)border-red-300De kleur van de rand kan direct worden toegepast. Je kunt ook eenvoudig een gestructureerde achtergrond (gradatie) toevoegen. bg-gradient-to-r from-cyan-500 to-blue-500 Dit beschrijft een lineaire kleurovergang van blauwgroen naar blauw, van links naar rechts.

Responsive design en interactieve gebruikersomgevingen

Het responsieve ontwerp van Tailwind volgt het principe “mobile first”. Elke functionaliteitsklasse is standaard ontworpen voor mobiele apparaten. Om stijlen toe te passen op grotere schermresoluties, moet je de corresponderende responsieve prefix toevoegen.text-center md:text-left lg:text-2xl Om tekst op mobiele apparaten te centreren op een scherm van gemiddelde grootte…md:Links uitgelijnd vanaf een bepaald aantal tekens of meer, op grote schermen.lg:Zet de fontgrootte op 18 pt of groter. 1.5rem。

Aanbevolen leesmateriaal Master Tailwind CSS: Een gids met de belangrijkste concepten en praktische tips voor beginners tot experts。

Het beheersen van de interactieve status is even eenvoudig. Je kunt bijvoorbeeld prefixen gebruiken, zoals… hover:、focus:、active: Om stijlen toe te voegen aan verschillende toestanden…<button class=“bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 …”> Je kunt eenvoudig effecten van hoveren en focussen realiseren, zonder dat je enige aangepaste CSS hoeft te schrijven.

Praktijk: Een kaartcomponent bouwen met Tailwind CSS

Laten we de bovenstaande kennis verwerken door een kaartcomponent in een modern stijl te bouwen. De kaart zal een foto, een titel, beschrijvend tekst, tags en een actieknop bevatten, en is daarnaast responsief (past zich automatisch aan verschillende schermformaten aan).

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.

Eerst bouwen we de HTML-structuur van de kaart op en voegen we basisteksten en containerklassen toe:

<div class="“max-w-sm" rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <!-- 图片区域 -->
  <img class="“w-full" h-48 object-cover” src="“https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600”" alt="“Technologische producten”">
  <!-- 内容区域 -->
  <div class="“px-6" py-4”>
    <div class="“font-bold" text-xl mb-2 text-gray-800”>Praktische gids voor Tailwind CSS</div>
    <p class="“text-gray-600" text-base”>
      Leren hoe je met atomaire toolklassen snel en eenvoudig moderne gebruikersinterfaces kunt bouwen die esthetisch aantrekkelijk, consistent en van hoge prestaties zijn. Je hoeft geen heen en weer te schakelen tussen verschillende bestanden; je kunt je volledig concentreren op het ontwerp zelf.
    </p>
  </div>
  <!-- 标签区域 -->
  <div class="“px-6" pt-2 pb-4”>
    <span class="“inline-block" bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”>#CSS-framework</span>
    <span class="“inline-block" bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># Front-end Development</span>
    <span class="“inline-block" bg-purple-100 text-purple-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># responsive</span>
  </div>
  <!-- 行动按钮 -->
  <div class="“px-6" pb-6”>
    <button class="“w-full" bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50”>
      Lees nu direct
    </button>
  </div>
</div>

Analyseren van de structuur en het ontwerp van kaarten

Op deze kaart hebben we een groot aantal toolklassen gebruikt. De buitenste container is gemaakt van... max-w-sm Om de maximale breedte te beperken…rounded-xl Realisatie van grote ronde hoekenshadow-lg Er is een diepere schaduw toegevoegd om een gevoel van diepte te creëren.bg-white Een witte achtergrond instellen.mx-auto Horizontaal centreren.

De afbeeldingsgebied is bereikbaar. h-48 De hoogte is vastgesteld en er wordt gebruik gemaakt van… object-cover Zorg ervoor dat de afbeelding goed wordt afgesneden en dat de ruimte rondom de afbeelding is gevuld. De marginen in het inhoudsgebied worden bepaald door… px-6 py-4 Controle. De titel is in vet gedrukt.font-boldGrotere lettertypen (large fonts)text-xlBovenmarge (top margin) en ondermarge (bottom margin)mb-2）。

De tag is gebruikt als inline-block.inline-blockIn combinatie met de achtergrondkleur, de tekstkleur en de ronde hoeken…rounded-full) en een kleine binnenmarge (px-3 py-1Om de capsule-stijl te realiseren, wordt gebruik gemaakt van bepaalde technieken. De knoppen zijn voorzien van een gradient-achtergrond.bg-gradient-to-rHover-based gradient changeshover:from-、hover:to-)、overgangsanimatiestransition duration-300) en de focusring (focus:ring-2En andere geavanceerde effecten.

Maak de kaartcomponenten responsief.

Om ervoor te zorgen dat de kaarten op grotere schermen beter worden weergegeven, kunnen we eenvoudig enkele responsieve klassen toevoegen. Bijvoorbeeld, als we op een middelgrote scherm willen dat de kaarten op een optimale manier worden weergegeven…md:Als de resolutie 1080p of hoger is, kunnen de kaarten horizontaal worden geplaatst, met de foto links en de inhoud rechts. We kunnen de buitenste structuur en de klassen van de foto en de inhoud een beetje aanpassen.

<div class="“max-w-4xl" md:flex rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <img class="“md:w-1/3" w-full h-48 md:h-auto object-cover” src="“…”" alt="“…”">
  <div class="“md:w-2/3" p-6 md:p-8”>
    <!-- 标题、描述、标签、按钮等内容 -->
  </div>
</div>

Door toe te voegen md:flex Zorg ervoor dat de container op middelgrote schermen een Flex-layout gebruikt, en... md:w-1/3 和 md:w-2/3 Controleer het verhouding van de breedte tussen de afbeelding en de inhoudsregio. De afbeelding… md:h-auto Zorg ervoor dat de hoogte automatisch wordt aangepast, met behoud van de inhoudsruimte. md:p-8 Dit zorgt ervoor dat de marginen onder een groot scherm groter worden. Met slechts enkele aanpassingen aan de klassen is een responsief kaartje klaar.

Samenvatting

Tailwind CSS De functionaliteit en de onderverdeling in “atoomaire” klassen van Tailwind CSS hebben de manier waarop we CSS schrijven radicaal veranderd. Het elimineert de mentale belasting die gepaard gaat met het kiezen van namen voor stijlen, waardoor de efficiëntie en consistentie van UI-ontwikkeling aanzienlijk verbeteren. Van eenvoudige regelmatigheden tot complexe responsieve lay-outs en interactieve elementen: alles kan snel worden gerealiseerd door eenvoudig te combineren met duidelijke klassennamen. Hoewel het op het eerste gezicht kan lijken onaantrekkelijk om veel klassennamen in HTML op te nemen, zorgt de verbeterde ontwikkelingservaring, de lagere onderhoudskosten en de uiteindelijke high-performance stijlbestanden ervoor dat Tailwind CSS een zeer concurrerend stijloplossing is voor moderne webprojecten. Met de inleiding en praktische oefeningen in dit artikel hoop ik dat je gemakkelijk kunt starten met het efficiënt gebruiken van Tailwind CSS.

Veelgestelde vragen (FAQ)

Wat is het verschil tussen Tailwind CSS en inline-stijlen?

Tailwind CSS verschilt fundamenteel van inline-stijlen. Inline-stijlen…style=””De mogelijkheid om met attributen een responsief ontwerp te realiseren via mediaqueries is niet beschikbaar, en evenmin kan worden omgegaan met pseudo-classen en -toestanden. :hover 或 :focusDaarnaast worden in-line-stijlen alle andere stijlen overschreven, waardoor er een gebrek aan regelgeving is.

De toolklassen van Tailwind zijn in feite vooraf gedefinieerde, bindende designtokenen. Ze zijn gebaseerd op een strikt designsysteem (met regels voor afstanden, kleurpaletten en breakpointen), waardoor de consistentie van het ontwerp wordt gewaarborgd. Tailwind ondersteunt volledig responsieve en stateful prefixen en kan bovendien op globale schaal worden aangepast via configuratie – iets wat niet mogelijk is met inline-styling.

Wat moet je doen als de namen van klassen in HTML te lang zijn in grote projecten, waardoor het verwarrend wordt?

Voor het herhaaldelijk voorkomen van complexe componentestijlen, raadt Tailwind aan om… @apply In CSS worden componentklassen extrahéerd uit instructies, of er wordt rechtstreeks gebruik gemaakt van de componentenfuncties van JavaScript-frameswerken (zoals React of Vue) voor het opsluiten van code.

Als voorbeeld kun je die complexe verzameling van knopklassen extraheren en deze in een CSS-componentklasse opslaan:

.btn-primary {
  @apply w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50;
}

En vervolgens gebruik je dit rechtstreeks in HTML: <button class=“btn-primary”>Een betere praktijk is om in React een… (de tekst is hier afgebroken; de volledige zin zou moeten worden toegevoegd om de betreffende aanpak of methode te beschrijven). <Button> Een component maken, of een component in Vue maken <MyButton> De stijl wordt opgeslagen binnen de component, waardoor de template overzichtelijk en simpel blijft.

Hoe optimaliseert Tailwind CSS de grootte van het uiteindelijk gecreëerde CSS-bestand?

Tailwind CSS generereert in de ontwikkelingsmodus een grote stylesheet die alle mogelijke toolklassen bevat, waardoor het gemakkelijk is om snel te ontwikkelen. Tijdens de productie-build wordt echter een zeer belangrijke optimalisatie-stap uitgevoerd.

Het zal worden aangepast op basis van de instellingen in het configuratiebestand. tailwind.config.js 的 content De in het veld opgegeven bestandspaden worden gebruikt om alle templatebestanden (zoals .html, .jsx, .vue) te scannen. Hieruit worden de namen van de door jou gebruikte toolklassen nauwkeurig gevonden. Vervolgens worden alle niet gebruikte stijlen uit het uiteindelijke CSS-bestand verwijderd. Deze procedure is zeer geoptimaliseerd en zorgt er meestal voor dat de grootte van het CSS-bestand wordt teruggebracht tot 10 KB of zelfs minder, waardoor de prestaties van het systeem aanzienlijk verbeteren.

Is het mogelijk om het standaard ontwerpssysteem van Tailwind te personaliseren?

Dat is zeker mogelijk, en dat is ook een van de sterke punten van Tailwind CSS: alle aanpassingen kunnen worden gemaakt. tailwind.config.js Deze actie wordt uitgevoerd in de bestand.

Je kunt... theme.extend Bij een object kun je de standaardthema uitbreiden door bijvoorbeeld nieuwe kleuren, ruimteafstanden, fontgrootten of brekpunten toe te voegen. theme Deze objecten overschrijven bepaalde delen van het standaardthema rechtstreeks. Je kunt bijvoorbeeld de hoofdkleur en de pauzepunten op deze manier aanpassen:

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1992d4’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
    screens: {
      ‘tablet’: ‘640px’,
      ‘laptop’: ‘1024px’,
      ‘desktop’: ‘1280px’,
    },
  },
}

Op deze manier kun je het gebruiken in het project. bg-brand-blue、w-128 te tablet: Dat is een aangepaste klasse.