Hoe bouw je snel en eenvoudig moderne, responsieve webpagina's met Tailwind CSS?

De belangrijkste voordelen van Tailwind CSS zijn:

Van de vele CSS-frames...Tailwind CSS Het onderscheidt zich door zijn unieke filosofie van 'Utility-First' (functionaliteit eerst). Traditionele CSS-frames zoals Bootstrap bieden ons een reeks vooraf gemaakte componenten aan, zoals knoppen, kaarten en navigatiebalken. Tailwind CSS In plaats daarvan wordt er een andere benadering gekozen: er worden geen vooraf ontworpen componenten geleverd, maar een set fijngeglideerde, atomaire CSS-toolklassen. Dit betekent dat ontwikkelaars door deze toolklassen rechtstreeks op HTML-elementen te combineren, een volledig customiseerde gebruikersinterface kunnen bouwen, net zoals je met bouwstenen zou kunnen bouwen.

Deze benadering brengt enkele belangrijke voordelen met zich mee. In de eerste plaats wordt de ontwikkelingsefficiëntie aanzienlijk verbeterd. Je hoeft geen moeite meer te doen om namen te bedenken voor CSS-klassen voor elk element, en er is ook geen meer nodig om heen en weer te schakelen tussen CSS- en HTML-bestanden. Alle stijlen staan rechtstreeks in het HTML, waardoor ze eenvoudig te begrijpen zijn. Ten tweede wordt ongebruikte CSS-code volledig vermeden. Dit wordt mogelijk gemaakt door de optimalisaties die worden geleverd door de bouwtools.Tailwind CSS Het is mogelijk om automatisch tools die niet worden gebruikt in het project te verwijderen, waardoor het uiteindelijke CSS-bestand zeer compact wordt. Bovendien wordt de consistentie van het ontwerp gewaarborgd. Door zich te houden aan een set vooraf bepaalde ontwerpregels (zoals kleuren, afstanden en fontgrootten) blijft het hele project overeenkomstig in visuele stijl, terwijl er toch oneindige ontwerpflexibiliteit is.

Snel starten met het configureren van het project

Om ermee te kunnen starten: Tailwind CSSDe gemakkelijkste manier om het te initialiseren is via het officiële CLI-hulpmiddel. Eerst moet je in het projectverhaal npm of yarn gebruiken om het hulpmiddel te installeren. tailwindcss Deze functie verzorgt de verpakking van de inhoud en genereert ook het bijhorende configuratiebestand.

Aanbevolen leesmateriaal Volledig in de geheimen van Tailwind CSS: een gids voor het moderne CSS-framework, van de basis tot de praktische toepassing。

npm install -D tailwindcss
npx tailwindcss init

Na het uitvoeren van de bovenstaande opdracht wordt een bestand genaamd… tailwind.config.js Dit is de kernconfiguratiebestand. Dit bestand is bedoeld voor jouw personaliseringen. Tailwind CSS Een hub voor het beheer van designelementen. Hier kun je de kleuren, fonten en andere designaspecten van een thema aanpassen, of de paden voor PurgeCSS instellen (een tool dat ongebruikte stijlen verwijdert tijdens de productie-build-proces). Hier is een voorbeeld van een basisconfiguratie:

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.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      }
    },
  },
  plugins: [],
}

Volgens de opgave moet je de benodigde elementen vervolgens invoeren in het hoofd-CSS-bestand (root CSS-file) van het project. Tailwind CSS De instructies voor… Meestal wordt deze bestand genoemd… input.css 或 styles.css。

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

Ten slotte hebt u een bouwproces nodig om deze instructies te verwerken en om ze om te toveren in bruikbare CSS. Dit wordt meestal gedaan met PostCSS-plug-ins. Als u moderne front-end toolchains gebruikt zoals Vite of Next.js, zijn deze meestal al geïntegreerd met PostCSS. Tailwind CSS Met de ondersteuning van … wordt het configuratieproces een stuk eenvoudiger.

De basis van de grammatica van toolklassen beheersen

Tailwind CSS De namen van de hulpprogramma-klassen (tool classes) volgen eenvoudige en consistente regels. Eenmaal deze regels onder de knie, zijn ze gemakkelijk te gebruiken. Hulpprogramma-klassen bestaan meestal uit categorieën van attributen en de daadwerkelijke waarden, die met een streep (-) worden verbonden.

Als je bijvoorbeeld de instellingen voor de randafstand (padding) wilt aanpassen, kun je dit doen op de volgende manier: p-{size} De format van... waarbij... {size} De corresponderende afstandssverhoudingen in de configuratie.p-4 Dit betekent dat de margin in alle richtingen gelijk is aan 1rem. pt-2 Dan wordt alleen een binnenmarge van 0,5rem toegepast aan de bovenkant (top). Op vergelijkbare manier wordt ook de buitenmarge (margin) gebruikt. m-{size}。

Aanbevolen leesmateriaal Tailwind CSS: Een introductie en verder ontwikkelen: van nul een moderne, responsieve webpagina bouwen。

Het instellen van de tekststijl volgt een vergelijkbare werkwijze.text-lg Zet de fontgrootte op groot.text-gray-700 Zet de tekstkleur op de kleur die in het grijs palette is genummerd als 700.font-bold Zet de tekst in een bold-lettertype.text-center Zorg ervoor dat de tekst in het midden is gealigneerd.

De layout-klassen zijn eveneens zeer krachtig.flex Flexbox-layout activeren.justify-between Zorg ervoor dat de subelementen aan beide uiteinden van de hoofdassijn worden uitgelijnd.items-center De sub-elementen worden in het midden van de kruisassen gealigneerd. Door deze klassen te combineren, is een complexe lay-out mogelijk zonder dat je een enkele regel aan aangepaste CSS hoeft te schrijven.

<div class="flex justify-between items-center p-4 bg-white shadow rounded-lg">
  <h2 class="text-xl font-bold text-gray-800">Kaarttitel</h2>
  <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded hover:bg-blue-600">
    Klikactie
  </button>
</div>

Het bovenstaande voorbeeldcode toont een eenvoudige kaartcomponent. De component gebruikt tools als flex-layout, ruimte tussen elementen, kleuren en ronde hoeken, en bevat ook een knop die een andere staat vertoont wanneer er met de muis wordt overgegaan (hover-effect).

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.

Realisatie van responsief en interactief ontwerp

Voor het bouwen van moderne webpagina's zijn een responsief ontwerp en interactieve feedback essentieel.Tailwind CSS Deze twee problemen zijn op elegante manier opgelost door het gebruik van prefixen.

Responsieve ontwerp wordt gerealiseerd door voor toolklassen een breakpoint-prefix toe te voegen.Tailwind CSS Er zijn standaard vijf pauzepunten beschikbaar:sm(640px)md(768px)lg(1024px)xl(1280px) en 2xl(1536px). De werking is gebaseerd op ‘mobile first’: klassen zonder prefix zijn van toepassing op alle schermgrootten, terwijl klassen met een prefix pas vanaf deze schermgrootte worden geactiveerd.

<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  <!-- 在移动设备上宽度占满，在中等屏幕占一半，在大屏幕占三分之一 -->
</div>
<div class="block md:flex">
  <!-- 在中等及以上屏幕变为 flex 布局 -->
</div>

Met betrekking tot de interactieve statusen, zoals 'hoveren', 'focusen' en 'actief zijn':Tailwind CSS Er worden ook corresponderende varianten-prefixen aangeboden. Je hoeft alleen het status-prefix voor te voegen aan de basis-toolklasse om de stijl voor die specifieke staat te definiëren.

Aanbevolen leesmateriaal Tailwind CSS: Een handleiding voor beginners – van nul tot een modern, responsief webpaginaat bouwen。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  交互按钮
</button>

Daarnaast kun je eenvoudig nieuwe pauzepunten en varianten van de status instellen of toevoegen via een configuratiebestand. Er zijn zelfs plugins beschikbaar voor meer geavanceerde functies, zoals een “favoriete kleurpatroon” (donkere modus). Nadat de donkere modus is ingeschakeld, hoef je alleen maar… dark: Met een prefix kun je al een stijl definiëren voor een donkere thema.

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <!-- 根据系统主题自动切换背景和文字颜色 -->
</div>

Geavanceerde technieken en beste praktijken

Naarmate het project groter wordt, is het heel nuttig om bepaalde best practices te volgen. Dit zorgt ervoor dat je project met meer succes wordt uitgevoerd. Tailwind CSS De code is eenvoudiger te onderhouden. In eerste plaats is het handig om toolklassen rechtstreeks in het HTML te schrijven, maar wanneer dezelfde complexe stijlcombinatie op meerdere plaatsen wordt gebruikt, kan het verstandig zijn om andere methoden te overwegen. @layer components Instrukties voor het extraheren van zelfgemaakte componentklassen.

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.

@layer components {
  .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 het rechtstreeks in het HTML worden gebruikt. class=“btn-primary” Dat is genoeg. Op deze manier wordt niet alleen dubbelzinnigheid vermeden, maar ook de semantiek behouden.

Ten tweede: gebruik het goed. tailwind.config.js De bestanden worden gebruikt voor het beheer van het ontwerpssysteem. De merkkleuren, fonten, schaduwen en andere ontwerpkenmerken worden op een centrale manier gedefinieerd in de configuratie. theme.extend In objecten kan de globale consistentie worden gewaarborgd, waardoor het later gemakkelijk is om het gehele thema te vervangen.

Ten slotte moet je ervoor zorgen dat de optimisaties die zijn gemaakt voor de productie-build worden toegepast. Dit moet worden geregeld in de configuratiebestanden. content Zorg ervoor dat alle paden naar templatebestanden die HTML, JSX, Vue of andere technologieën bevatten, correct zijn ingesteld in de eigenschappen.Tailwind CSS Om tijdens het bouwen nauwkeurig de “tree shaking”-optimalisatie te kunnen uitvoeren, alle ongebruikte stijlen te verwijderen en zo een zo klein mogelijk CSS-bestand te genereren…

Samenvatting

Tailwind CSS Dankzij zijn methodologie, waarbij functionaliteit voorrang heeft, is de manier waarop we CSS schrijven en gebruiken fundamenteel veranderd. Het verplaatst de beslissingen over het uiterlijk van de website van de style sheets naar de eigen markup-elementen, waardoor een ongeëvenaarde ontwikkelings snelheid, een grotere consistentie in het ontwerp en uitstekende prestaties worden bereikt. Van het snel instellen van basisinstellingen en het beheersen van de grammatica van de tools, tot het realiseren van complexe responsieve lay-outs en interactieve elementen, en tot het naleven van best practices als het extraheren van componenten en het aanpassen van design-elementen (design tokens): alles is mogelijk.Tailwind CSS Er wordt een compleet en efficiënt modern webbouwplatform beschikbaar gesteld voor ontwikkelaars. Of je nu een nieuw project vanaf nul start of de stijl- en werkwijze van een bestaand project wilt verbeteren, dit is een krachtig hulpmiddel dat de moeite van het verder bestuderen en gebruiken waard is.

Veelgestelde vragen (FAQ)

Zorgt Tailwind CSS ervoor dat de HTML-code onnodig lang en onoverzichtelijk wordt?

Dit is een veel voorkomende zorg. Inderdaad kan de lijst met klassen op één element lang worden. De “te lange” inhoud wordt echter gecompenseerd door de uiterste helderheid en onderhoudsvriendelijkheid. Je hoeft niet heen en weer te switchen tussen verschillende bestanden; alle stijlen zijn direct zichtbaar op het element. Voor complexe combinaties van klassen die vaak worden gebruikt, kun je… @apply Instrukties of componenten van een framework (zoals de componenten van Vue of React) worden effectief geabstraheerd, waardoor er een balans wordt gevonden tussen eenvoudigheid en leesbaarheid.

In teamprojecten: hoe kan je de consistentie in het gebruik van Tailwind garanderen?

Consistentie wordt voornamelijk bereikt door het gebruik van configuratiebestanden. tailwind.config.js Om dit te garanderen, moet het team samen deze bestand onderhouden en de designregels voor kleuren, afstanden, fonten, schaduwen en dergelijke daarin opnemen. Op deze manier gebruiken alle teamleden dezelfde designstandaarden. Daarnaast kan het Prettier-plugin worden gebruikt om de code op te schonen en te uniformeren. prettier-plugin-tailwindcssDit gebeurt om de klassennamen automatisch te ordenen en zo een uniforme code-stijl te behouden.

Kan Tailwind CSS worden gebruikt in combinatie met bestaande CSS- of UI-componentenbibliotheken (zoals Bootstrap)?

Ja, dat is mogelijk, maar het wordt over het algemeen niet aanbevolen om ze te mixen, omdat hun methodologieën met elkaar kunnen conflicten vertonen. Als het toch nodig is om ze samen te gebruiken, moet je oppassen voor stijlconflicten en specifiekheidsproblemen. Een meer gebruikelijke benadering is om ze geleidelijk in te voeren bij nieuwe functies of nieuwe modules. Tailwind CSSOf verhuist de bestaande projecten volledig over naar… Tailwind CSSSommige componentenbibliotheken bieden ook mogelijkheden op basis van… Tailwind CSS Deze versies, zoals Headless UI, kunnen naadloos met elkaar samenwerken.

Is de leercurve voor Tailwind CSS steil?

Voor ontwikkelaars die gewend zijn aan traditioneel CSS of componentenframeworks, zal het in het begin nodig zijn om aan een “combinerend” denkpatroon te wennen; dit kan enkele dagen duren. Eenmaal dat de namenregels en kernconcepten zijn begrepen, zal de ontwikkelingsefficiëntie echter aanzienlijk verbeteren. De officiële documentatie is zeer uitgebreid en bevat veel voorbeelden, waardoor het de beste bron is voor het leren. Het intuïtieve ontwerp van de klassennamen helpt ook bij het gemakkelijk onthouden van de verschillende elementen.

Hoe voeg je eigen stijlen of animaties toe aan Tailwind CSS?

Er zijn verschillende manieren om aangepaste stijlen toe te voegen. Voor speciale stijlen die slechts één keer worden gebruikt, kun je direct inline-stijlen of een traditioneel CSS-bestand toepassen. Voor aangepaste stijlen die op meerdere plaatsen worden gebruikt, is het beste om deze in het hoofd-CSS-bestand op te nemen. @layer De instructie bepaalt dat deze elementen worden toegevoegd aan de corresponderende lagen (base, components, utilities), en dit moet worden gerealiseerd met behulp van de beschikbare tools of methoden. @apply Om rekening te houden met bestaande toolklassen: voor aangepaste animaties kun je… tailwind.config.js 的 theme.extend.animation 或 theme.extend.keyframes De definitie vindt plaats in...