Inleidingsgids: Maak kennis met Tailwind CSS en bouw responsieve gebruikersinterfaces

Ga aan de slag Tailwind CSS Als je dit wilt gebruiken, moet je het eerst integreren in je project. De meest voorkomende manier is om het te installeren met een pakketbeheeringshulpmiddel. Als je bijvoorbeeld Git gebruikt... npm 或 yarnHet kan gemakkelijk worden toegevoegd als ontwikkelingsafhankelijkheid. Na de installatie wordt de basisconfiguratie meestal geregeld met een tool met de naam… tailwind.config.js De configuratie wordt gerealiseerd met een configuratiebestand. In dit bestand kun je alle aspecten van je designsysteem definiëren, zoals themakleuren, fonten, ruimteproporties, etc., waardoor je een stijl kunt creëren die past bij je project. Tailwind CSS Versie.

Om dit in het project te kunnen gebruiken Tailwind CSSJe moet de instructies van deze bron in je hoofdCSS-bestand opnemen. Meestal heet dit bestand… input.css 或 styles.cssDoor middel van… @tailwind Je kunt instructies injecteren. Tailwind CSS De basisstijlen, componentklassen en hulpprogrammaklassen. Daarna heb je een bouwproces nodig (bijvoorbeeld met PostCSS) om deze CSS-bestand te verwerken en een eindresultaat te genereren dat wordt gebruikt in de productieomgeving.

Een eenvoudige projectstructuur kan er als volgt uitzien:

Aanbevolen leesmateriaal Volledig in de gelegenheid komen met Tailwind CSS: een gids voor het moderne CSS-framework, van het begin tot de praktische toepassing。

your-project/
├── src/
│   ├── styles/
│   │   └── input.css
│   └── index.html
├── tailwind.config.js
├── package.json
└── postcss.config.js

In jouw... input.css In de bestanden staat meestal de volgende inhoud:

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 →

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

Deze procedure zorgt ervoor dat je toegang hebt tot… Tailwind CSS Alle beschikbare praktische klassen.

Core concepts and practical classes

Tailwind CSS Het kernpunt is het concept 'Utility-First'. Dit houdt in dat je stijlen rechtstreeks bouwt door een groot aantal kleine, specifiek ontworpen klassen te combineren, in plaats van traditionele CSS-regels te schrijven of custom componentklassen te creeren. Dit maakt het mogelijk om het ontwerp snel te itereren en de stijlbestand te houden op een compacte omvang.

Het begrijpen van de benaming van praktische klassen

De namen van praktische functies volgen een duidelijk patroon en gebruiken meestal de structuur “eigenschap-waarde” of “eigenschap-punt-waarde”.text-blue-500 Dit betekent dat de tekstkleur wordt ingesteld op de 500e kleur uit de blauwe kleurpalet.p-4 Dit betekent dat er een margin van 4 eenheden wordt toegepast in alle richtingen (padding). md:p-6 Dit betekent dat voor schermgrootten van medium (md) en groter, de margin wordt veranderd in 6 eenheden.

Deze benoemingswijze zorgt voor een zeer geleidelijke leercurve: zodra je de basisbenoemingspatronen onder de knie hebt, kun je de functies van de meeste klassen zelf afleiden. Als je bijvoorbeeld weet... m-2 Dit zijn de marginen (de ruimtes aan de buitenkant van een element of tekst). mt-2(margin-top)mx-autoDe automatische buitenmarge in horizontale richting is gemakkelijk te begrijpen.

Aanbevolen leesmateriaal Het ultimatieve gidsboek voor Tailwind CSS: van het begin tot de volmaakte beheersing van responsive webpagina's。

Responsief ontwerp

Responsive design is ingebouwd in... Tailwind CSS In de genen… Het framework biedt standaard vijf pauzes/punten (breakpoints) aan:sm、md、lg、xl、2xlOm stijl toe te passen op een specifieke breakpoint, hoef je alleen de prefix van de breakpoint te voegen voor de praktische klasse, gevolgd door een komma. Hier is een voorbeeld:<div class="“text-sm" md:text-base lg:text-lg”> Er wordt een tekst gecreëerd die op kleine schermen in een kleiner font wordt weergegeven, op middelgrote schermen in een standaardfont en op grote schermen in een groter font. Je hoeft geen mediaqueries te schrijven; de hele responsieve logica wordt geregeld door de gebruikte klassennamen.

Een responsief ontwerp bouwen

Gebruik Tailwind CSS Een flexibele lay-out maken is zowel intuïtief als efficiënt. Frameworks bieden krachtige hulpmiddelen om responsieve interfaces te bouwen, van eenvoudig tot complex.

Het gebruik van Flexbox en Grid

Voor een eendimensionale lay-out kun je dit direct gebruiken. flex、flex-col、items-center、justify-between Je kunt klassen gebruiken om een Flexbox-layout snel te implementeren. Voor meer complexe twee-dimensionale layouts…grid、grid-cols-3、gap-4 Klassen als deze maken het gemakkelijk om CSS Grid te gebruiken.

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.

Als voorbeeld is het zeer eenvoudig om een layout met drie kolommen te creeren die op mobiele apparaten verticaal worden weergegeven en op desktop-apparaten horizontaal worden geordend:

<div class="“container" mx-auto p-4”>
  <div class="“flex" flex-col md:flex-row gap-4”>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Kolom 1</div>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Colomne twee</div>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Colomne 3</div>
  </div>
</div>

In de bovenstaande code,container De klasse biedt een centraal geplaatst container met een beperking op de maximale breedte.flex-col In de standaardinstellingen (voor mobiele apparaten) worden elementen verticaal geordend. md:flex-row Op schermen van gemiddelde grootte en groter wordt de weergave in horizontale richting geplaatst.gap-4 Een ruimte toevoegen tussen onderdelen.

Verwerken van containers en ruimtes ertussen

Tailwind CSS Het systeem voor het bepalen van de ruimte tussen elementen is gebaseerd op een instelbare verhouding (de standaard is een multiple van 4px; bijvoorbeeld 1 correspondeert met 0,25rem). Dit maakt het zeer eenvoudig om een consistente indeling te behouden in alle attributen zoals margin, padding, gap, width en height. p-6、m-2、space-x-4 Met een dergelijke klasse kun je de ruimtelijke relatie tussen elementen en binnen de elementen precies bepalen, zonder dat je telkens op de pixelwaarden hoeft te letten.

Aanbevolen leesmateriaal Wat maakt Tailwind CSS de favoriete framework voor moderne front-endontwikkeling?。

Personalisatie en geavanceerde functies

Hoewel Tailwind CSS Het is direct klaar voor gebruik, maar de echte kracht zit in de hoge mate van personalisatie. Bijna alle standaardwaarden kunnen worden aangepast met behulp van een configuratiebestand.

Configuring design tokens

在 tailwind.config.js In het bestand kun je de standaardthemainstellingen uitbreiden of overschrijven. Je kunt bijvoorbeeld merkkleuren toevoegen, een eigen fontfamilie kiezen, de waarden van brekpunten aanpassen of je eigen verhoudingen tussen elementen bepalen.

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.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1d4ed8’,
      },
      fontFamily: {
        ‘sans’: [‘Inter’, ‘system-ui’, ‘sans-serif’],
      },
    },
  },
  // ... 其他配置
}

Nadat de configuratie is voltooid, kunt u het direct gebruiken, net zoals... text-brand-blue 或 font-sans Zo'n klasse. De manier van beheersen van designtokens brengt de designbeslissingen op één plek samen, waardoor de visuele consistentie van het hele project wordt gewaarborgd.

Creëer herbruikbare componenten

Hoewel praktischheid voorop staat, kun je het toch nog steeds doen. @apply Het is handig om een praktisch patroon te gebruiken voor het extraheren van instructies met dubbele elementen, waarmee je zelfgemaakte CSS-klassen kunt creëren. Dit is vooral handig wanneer je met complexe combinaties van stijlen te maken hebt die op meerdere plaatsen worden gebruikt.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}

En daarna kun je dit gebruiken in HTML. <button class=“btn-primary”>Vergeet niet dat...Tailwind CSS Er wordt officieel geadviseerd om voorzichtig te zijn met het gebruik. @applyGeef de voorkeur aan het rechtstreeks combineren van praktische klassen in HTML, om de onderhoudbaarheid te behouden. Voor echte, logisch complexe componenten moet men de componentmechanismen van JavaScript-frames (zoals React of Vue) gebruiken om deze te verpakken.

Prestatieoptimalisatie en productieimplementatie

Als het project is afgerond, moet je de stijlbestanden optimaliseren voor de productieomgeving.Tailwind CSS Er worden veel praktische klassen gecreëerd, maar het is waarschijnlijk dat je project alleen een deel daarvan gebruikt. Het direct deployen van onoptimaliseerde bestanden kan leiden tot een groot aantal onnodige codes.

Het uitvoeren van een 'tree shaking' met PurgeCSS.

Tijdens het bouwen van een productieversie,Tailwind CSS Zal samenwerken met PurgeCSSIn de nieuwere versies is dit geïntegreerd. tailwindcss De tool werkt samen met je HTML-, JavaScript-componenten en andere templatebestanden. Het scannt deze bestanden om de namen van de klassen te bepalen die je daadwerkelijk gebruikt, en verwijdert vervolgens alle ongebruikte stijlregels. Dit kan de grootte van het uiteindelijke CSS-bestand vaak verkleinen van enkele MB’s naar enkele KB’s tot enkele tientallen KB’s.

De configuratie wordt meestal gedaan in… tailwind.config.js Voltooid in China:

module.exports = {
  purge: [‘./src/**/*.{html,js,jsx,ts,tsx,vue}’],
  // ... 其他配置
}

Je moet de paden van alle bronbestanden opgeven waarin de namen van je klassen te vinden zijn; de bouwtool zal dit automatisch verwerken.

JIT-modus inschakelen

Vanaf een bepaalde versie…Tailwind CSS Er is een Just-In-Time (JIT)-motor geïntroduceerd. In JIT-modus worden stijlen op maat gemaakt, in plaats van dat eerst een enorme stijlboom wordt gemaakt die alle mogelijke klassen bevat. Dit betekent dat:
1. De snelheid van ontwikkeling en bouw is zeer hoog.
2. Je kunt alle gewenste waarden gebruiken, bijvoorbeeld: top-[-113px] 或 text-[#1d4ed8]Dit kan zonder dat het vooraf in de configuratie wordt gedefinieerd.
3. De productie- en bouwprocessen zijn in feite ook op maat gemaakt, waardoor er geen behoef is aan complexe systemen of methoden. purge De configuratie is eveneens uitstekend, net zoals de prestaties.

Om de JIT-modus te activeren, hoef je dit alleen in de configuratiebestand aan te geven. mode Instellen als ‘jit’En geef ook de path van je bronbestand op.

Samenvatting

Tailwind CSS Met deze praktische en prioriteiten gebaseerde methodologie is de manier waarop ontwikkelaars gebruikersinterfaces bouwen volledig veranderd. De beslissingen met betrekking tot het uiterlijk van de interfaces zijn verplaatst van CSS-bestanden naar HTML of templates, waardoor een verbazingwekkend hoge ontwikkelings snelheid en een grote mate van designconsistentie wordt bereikt. Het begint met een snelle installatie en het begrijpen van het kernsysteem van praktische klassen; daarna worden complexe, responsieve layouts gemaakt, en ten slotte wordt het designsysteem verder aangepast om de prestaties in de productieomgeving te optimaliseren.Tailwind CSS Er wordt een compleet, efficiënt en uitbreidbaar set hulpmiddelen aangeboden. Als je deze hulpmiddelen beheerst, kun je je beter concentreren op het creeren van interfaces die zowel functioneel als esthetisch aantrekkelijk zijn, zonder te veel tijd te spenderen aan het ontwikkelen van een stijlarchitectuur en namenregels.

Veelgestelde vragen (FAQ)

Zorgen de vele klassennamen die door Tailwind CSS worden generereerd voor een te omvangrijke HTML-code?

Ja, dat is een veel voorkomend kenmerk van het Practical Priorities Framework. Op HTML-elementen… class De attributen kunnen erg lang worden. Toch wordt dit meestal gezien als een trade-off: hoewel de grootte van de HTML-bestanden iets toeneemt, worden CSS-bestanden door optimisatie zeer compact. Browsers kunnen HTML zeer snel verwerken. Veel ontwikkelaars vinden dit overeenkomstig met de snelheid van ontwikkeling, de gemakkelijkheid in onderhoud en de flexibiliteit die hiermee wordt bereikt. In componentenframeworks (zoals React en Vue) kan deze redundantie worden opgesloten binnen de componenten, waardoor de buitenste laag van het codepatroon nog steeds simpel blijft.

Hoe kun je de Tailwind-stijl van derde-party-componenten overschrijven of resetten?

Wanneer het wordt geïntroduceerd en gebruikt… Tailwind CSS Wanneer je een bibliotheek met componenten van derden gebruikt, kunnen er stijlconflicten optreden. Er zijn verschillende strategieën om dit op te lossen: 1. Verhoog de specificiteit: gebruik specifiekere klassen of selectoren om je stijlen te omhullen. 2. Gebruik !importantVoeg dit toe aan de praktische klassen: ! Prefixen, bijvoorbeeld bg-red-500!(In JIT-modus), maar dit moet met voorzichtigheid worden gebruikt. 3. Verander de volgorde in de configuratie: zorg ervoor dat je CSS na de CSS van de componentenbibliotheek wordt ingevoerd. 4. De fundamenteelste oplossing is dat je, als de componentenbibliotheek dit toestaat, de CSS van de componentenbibliotheek kunt opnemen in je eigen CSS. Tailwind CSS Deze “basis”-stijl wordt gedeeltelijk geïntroduceerd, zodat je praktische klassen (utility classes) kunnen worden gebaseerd op dezelfde design-elementen (design tokens) en een hogere prioriteit kunnen hebben.

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

Tailwind CSS Het is een CSS-framework dat perfect samenwerkt met elke front-end-technologie die HTML kan genereren. Het is vooral populair in moderne JavaScript-frameworks en -bibliotheken zoals React, Vue.js, Angular, Svelte en Next.js. Het componentmodel van deze frameworks past goed bij dit CSS-framework. Tailwind CSS De praktische combinaties van verschillende klassen complementeren elkaar perfect; je kunt stijl en structuur samen opslaan in een component. Er zijn ook officiële integratieplugins en tools beschikbaar voor frameworks als React en Vue, waardoor je ontwikkelingservaring nog verder wordt verbeterd.

In teamprojecten: hoe houd je de consistentie bij het gebruik van Tailwind-classnamen op peil?

Om consistentie te bewaren, zijn enkele regels en hulpmiddelen nodig. Allereerst is het belangrijk om deze regels goed te gebruiken. tailwind.config.js Deze bestanden maken het mogelijk om designelementen als merkkleuren, tussenruimtes en fonten centraal te beheren, zodat iedereen gebruikmaakt van hetzelfde designsysteem. Daarnaast zijn er editorplugins beschikbaar, zoals Tailwind CSS IntelliSense, die automatische suggesties en voorbeelden bieden wanneer je de code invoert (bijvoorbeeld bij het invoeren van een letter). Dit verlichtt de memoriebelasting en vermindert de kans op spellingfouten. Voor complexe stijlcombinaties kan het team afspraken maken over de gebruikelijke opstellingen. @apply Haal enkele algemeen erkende, veelgebruikte componenten uit (zoals knoppen en kaarten), of creeer direct de corresponderende framework-componenten. Daarnaast wordt het Prettier-plugin gebruikt. prettier-plugin-tailwindcss Het kan automatisch worden gedaan. class Sorteer de klassennamen in de attributen en bewaar een uniforme code-stijl.