Praktische handleiding voor Tailwind CSS in het Chinees: van nul naar een moderne, responsieve UI

Wat is Tailwind CSS?

Tailwind CSS is een CSS-framework dat focus legt op functionaliteit. Het biedt een reeks onderdelen (klassen) die laagdreven en te combineren zijn, waardoor ontwikkelaars snel en eenvoudig een aangepaste design kunnen bouwen in HTML. In tegenstelling tot traditionele CSS-frameworks zoals Bootstrap of Bulma, biedt Tailwind geen vooraf ontworpen componenten (zoals drop-down-menues of navigatiebalken) aan, maar een set “atoomklassen” die vergelijkbaar zijn met Lego-blokjes. Deze klassen corresponderen met één enkele CSS-eigenschap. text-center Corresponderend met text-align: center;，mt-4 Corresponderend met margin-top: 1rem;Door deze klassen te combineren, kunnen ontwikkelaars alle mogelijke visuele ontwerpen creëren zonder dat ze zelf custom CSS hoeven te schrijven. Dit resulteert in een grotere ontwikkelingsefficiëntie, terwijl de mogelijkheid voor hoog niveau van personalisatie behouden blijft.

De kernfilosofie van Tailwind is dat “beperkingen vrijheid brengen”. Met een zorgvuldig ontworpen systeem (afstanden, kleuren, fontgrootten, etc.) wordt de consistentie in het ontwerp gewaarborgd. Daarnaast wordt het mogelijk gemaakt om Tailwind te gebruiken in samenwerking met configuratiebestanden. tailwind.config.js Deze designsystemen kunnen volledig worden aangepast, zodat ze naadloos passen bij elke merkstijl. Daarnaast kan de productieversie van Tailwind worden verkleind door ongebruikte stijlen te verwijderen, waardoor de laadprestaties voor de eindgebruiker worden verbeterd.

Omgeving opzetten en project initialiseren

Er zijn verschillende manieren om met Tailwind CSS te gaan werken, waaronder via een CDN, met PostCSS of met de CLI (Command Line Interface) van Tailwind. Voor moderne front-end-projecten wordt het integreren via PostCSS het meest aanbevolen, omdat dit het meest complete set aan functies biedt en ondersteuning biedt voor optimalisatie voor de productieomgeving.

Aanbevolen leesmateriaal Master Tailwind CSS: Een praktische gids voor het ontwikkelen van componenten, van het begin tot de volle vertrouwdheid。

Installeer met PostCSS:

Allereerst hebt u een Node.js-omgeving nodig. U kunt een project initialiseren met npm of yarn en daarna Tailwind installeren. Voor een nieuw project zijn de gebruikelijke stappen om de vereiste pakketten te installeren via npm. tailwindcss In zichzelf, en ook... postcss 和 autoprefixerDit komt doordat Tailwind een PostCSS-plugin 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 →

npm init -y
npm install -D tailwindcss postcss autoprefixer

Volgens de instructies moet je nu de procedure uitvoeren door het uitvoeren van de betreffende commando of actie. npx tailwindcss init Een command om een configuratiebestand voor Tailwind te genereren tailwind.config.jsDaarnaast moet je ook een PostCSS-configuratiebestand maken. postcss.config.jsEn configureer daarin Tailwind en autoprefixer.

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

Tailwind CSS introduceren

Na het installeren moet je de instructies van Tailwind toevoegen aan het CSS-uitgangsbestand van het project. Meestal heet dit bestand... src/styles.css 或 input.css。

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

@tailwind base De instructies zorgen ervoor dat de basisstijlen van Tailwind worden toegevoegd, de standaardstijlen van de browser worden hersteld en enkele fundamentele regels worden ingesteld.@tailwind components Er zal alles worden ingebracht wat je doorgeeft. @apply Custom component classes die zijn geregistreerd in instructies of configuratiebestanden.@tailwind utilities Alle handige klassen van Tailwind worden toegevoegd.

Ten slotte moet je deze CSS-fail opstellen. Als je gebruikmaakt van een pakkettenmaker zoals webpack of Vite, zorgen de configuratie van het PostCSS-plugin ervoor dat de CSS automatisch wordt verwerkt. Je kunt ook de Tailwind CLI gebruiken om de CSS-fail te bewaken en te genereren:npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watchNadat de constructie is voltooid, moet de uitgevoerde bestand worden ingevoerd in het HTML. output.css Dat is genoeg.

Aanbevolen leesmateriaal Een diepgaande analyse van het Tailwind CSS-framework: van basisbeginselen tot praktische toepassingen.。

Core utility classes en responsief ontwerp

Het kernpunt van Tailwind CSS is zijn uitgebreide en systeematische bibliotheek met praktische klassen. Het beheersen van de nameregels voor deze klassen is essentieel voor een efficiënte gebruikerservaring.

Overzicht van veelgebruikte hulpmiddelen

De klassennamen in Tailwind hebben meestal de vorm “attribuut-waarde”, waarbij de waarde is gedefinieerd volgens het schaalniveau van het designsysteem (bijvoorbeeld 0, 1, 2, 4, 6, 8, etc.). Voorbeeld:
Afstand tussen regels:m-4(margin: 1rem)p-2(padding: 0.5rem)mt-8(margin-top: 2rem).
Typografie:text-lg.font-size: 1.125rem)font-bold.font-weight: 700)text-gray-800(kleur: #2d3748).
Achtergrond en rand:bg-blue-500(`background-color`)border，rounded-lg(border-radius: 0.5rem);
Lay-out:flex，items-centeralign-items: centerjustify-betweenjustify-content: space-between;

Een responsief ontwerp realiseren

Tailwind gebruikt een responsief ontwerpstrategie waarbij mobiele apparaten voorrang krijgen. De standaardklassen zijn gericht op mobiele apparaten (kleine schermen). Om stijlkenmerken toe te voegen aan grotere schermen, moet je gebruikmaken van responsieve prefixen. md:、lg:、xl:、2xl:。

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.

Deze pauzepunten kunnen worden gebruikt in... tailwind.config.js De documenten van theme.screens Een deel kan worden aangepast naar wens. Hier is een typisch voorbeeld van een responsief knopdesign:

<button class="text-sm bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 md:text-base lg:py-3 lg:px-6">
  响应式按钮
</button>

In dit voorbeeld wordt op mobiele apparaten gebruik gemaakt van een kleiner font voor de knoppen.text-smOp middelgrote schermen (…)md:Gebruik de basisfontgrootte voor tekst van (en hoger).md:text-baseOp de grote schermen…lg:De elementen hebben een grotere binnenruimte (margin).lg:py-3 lg:px-6De hover-effect wordt bereikt door... hover: Varianten van de implementatie: Op deze manier wordt de responsieve logica op een declaratieve manier in HTML geschreven, waardoor het zeer intuïtief is.

Custom configuraties en geavanceerde gebruikersmogelijkheden

De kracht van Tailwind zit in zijn hoge mate van personalisatie. Met configuratiebestanden kun je de standaardthema's uitbreiden of volledig vervangen.

Aanbevolen leesmateriaal De krachtige mogelijkheden van Tailwind CSS ontdekken: een volledig handboek over het praktische en flexibele CSS-framewerk。

Uitbreiden van themaconfiguratie

tailwind.config.js Dit is het kernaspect van de personalisatie. Je kunt hierbij… theme.extend Er worden nieuwe waarden toegevoegd aan het object. Deze waarden worden gecombineerd met het standaardthema, in plaats van het te overschrijven. Denk hierbij aan het toevoegen van een nieuwe merkkleur of een aangepaste afstand tussen elementen.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Nadat de configuratie is voltooid, kun je deze gebruiken in het project. bg-brand 和 w-128 Zo'n klasse. In de configuratie… content De velden zijn van cruciaal belang, omdat ze bepalen welke bestanden Tailwind moet scannen voor het uitvoeren van de “tree-shaking”-optimalisatie. Hierdoor worden alle ongebruikte stijlklassen tijdens de productiebuild verwijderd, waardoor de CSS-bestanden zo minimaal mogelijk blijven.

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.

Creëer een reusbaar componentklasse

Hoewel het wordt aanbevolen om praktische klassen rechtstreeks in HTML te gebruiken, kunnen complexe stijlcombinaties die vaak in een project worden herhaald worden opgeslagen als componentklassen. Er zijn verschillende manieren om dit te realiseren:

1. Gebruik @apply In een CSS-bestand kun je gebruikmaken van… @apply Combineer meerdere praktische klassen in een nieuwe klasse.

    .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;
    }

Daarna kan dit worden gebruikt in HTML. <button class="btn-primary">。

2. Gebruik JavaScript-componenten: In frameworks als React, Vue of Svelte is het beste om deze stijlregels te combineren en te verpakken in een herbruikbare UI-component. <Button>Dit behoudt de flexibiliteit van Tailwind terwijl er ook een componentgerichte onderhoudsvaardigheid wordt gerealiseerd.

Daarnaast beschikt Tailwind over een uitgebreid ekosysteem aan plugins, waaronder ook de officiële plugins. @tailwindcss/forms(Optimalisatie van de vormstaal)@tailwindcss/typography(Dit wordt gebruikt voor het opmaken van artikelinhoud; de functionaliteit kan verder worden uitgebreid.)

Samenvatting

Tailwind CSS heeft de manier waarop we CSS schrijven volledig veranderd door een set uitgebreide, atomaire toolklassen te bieden. Het doet af van de beperkingen van vooraf gedefinieerde componenten, waardoor ontwikkelaars maximale flexibiliteit en volledige controle over designdetails krijgen. De “mobile-first”-responsieve benadering, de krachtige mogelijkheden voor personalisatie en de mogelijkheid om CSS-bestanden te optimaliseren, maken Tailwind CSS uiterst geschikt voor alle soorten projecten – van snel ontworpen prototypes tot grote, geproduceerde toepassingen. Het kan even duren om de namenregels van de klassen te leren en te begrijpen, maar eenmaal onder de knie, biedt Tailwind CSS een ongekende snelheid en consistentie in het ontwikkelen van gebruikersinterfaces. In combinatie met moderne front-end tools is Tailwind CSS zeker een krachtig hulpmiddel voor het bouwen van moderne,高性能se en responsieve gebruikersinterfaces.

Veelgestelde vragen (FAQ)

Er zijn veel klassen in Tailwind. Hoe kan ik voorkomen dat de HTML erg onoverzichtelijk wordt?

Dit is inderdaad een veel voorkomend probleem voor beginners. Naarmate projecten complexer worden, kunnen de namen van klassen in HTML langer worden. De beste manier om dit probleem op te lossen is door te werken met een componentgerichte ontwikkelingsbenadering. In frameworks als React en Vue moet je UI-elementen opslaan als herbruikbare componenten. Op deze manier worden de lange klassennamen geïsoleerd binnen de templates of renderfuncties van de componenten, waardoor er een eenvoudige en begrijpelijke interface voor de buitenwereld wordt geboden. <Card>、<Navbar>Daarnaast is het belangrijk om deze mogelijkheden verstandig te gebruiken. @apply Het extraheren van dubbele stijlcombinaties uit instructies kan ook zorgen voor een simpeler HTML-code.

Zorgt Tailwind CSS voor een grotere gecompakteerde (gepackte) afmeting van het uiteindelijke resultaat?

Integendeel: Tailwind CSS kan de omvang van het CSS-bestand in een productieomgeving vaak aanzienlijk verkleinen. Het belangrijkste aspect hierbij is de zogeheten “tree shaking”-optimalisatie. Dit gebeurt wanneer de CSS-code op de juiste manier is ingesteld. tailwind.config.js De Chinese versie van dit bericht is niet beschikbaar. content Tailwind’s buildtool analyseert je projectbestanden (HTML, JSX, Vue, etc.) en bepaalt welke toolklassen daadwerkelijk worden gebruikt. De gebruikelijke stijlen worden enkel samengeperst in het uiteindelijke CSS-bestand. Dit betekent dat, ongeacht hoe groot de broncodebibliotheek van Tailwind is, de CSS die je gebruikers downloaden alleen de stijlen bevat die ze nodig hebben – meestal tussen enkele KB en een tiental KB in omvang.

Hoe kun je de standaardkleurpatronen of ruimtesystemen van Tailwind modificeren?

Het is volledig mogelijk om dit te bereiken door aanpassingen te maken. tailwind.config.js De bestand is aangepast. theme.extend Als je een nieuwe waarde toevoegt aan een object, wordt het standaardthema uitgebreid. Als je een bepaald themaknoppen (key) volledig wilt overschrijven, moet je de inhoud van dat themaknoppen vervangen door de nieuwe gegevens. colors 或 spacingAls dat het geval is, dan gebeurt het rechtstreeks… theme Onder (in plaats van) extend Deze regel definieert de betreffende sleutel. De nieuwe definitie zal de standaardwaarde volledig vervangen. Voorbeeld:theme: { colors: { primary: '#ff0000' } } Alle standaardkleuren worden verwijderd; alleen de door jou gedefinieerde kleuren blijven over. primary Kleur.

Welke UI-bibliotheken of frameworks zijn geschikt om te gebruiken met Tailwind CSS?

Tailwind CSS past perfect samen met bijna alle moderne front-end frameworks, zoals React, Vue, Angular, Svelte, Next.js, Nuxt.js, Gatsby en meer. De stijl wordt gerealiseerd met pure CSS-klassen en is niet afhankelijk van enige specifieke JavaScript-runtimes. Daardoor kun je Tailwind CSS gebruiken op iedere plek waar je HTML kunt schrijven. Veel populaire UI-componentenbibliotheken, zoals Headless UI (een officiële, stijlloze componentenbibliothek) en DaisyUI (een componentenbibliothek gebaseerd op Tailwind), zijn speciaal ontworpen voor Tailwind en kunnen naadloos worden geïntegreerd, waardoor de ontwikkelingsefficiëntie nog verder wordt verbeterd.