Ultimate Guide to Tailwind CSS: Build Modern, Responsive Websites from Scratch

Core concepts and working principles

Tailwind CSS is een CSS-framework dat zich richt op het principe van ‘Utility-First’ (dus dat functionaliteit voorop staat). Het kernpunt van Tailwind is dat stijlen worden opgedeeld in kleine, individuele en combinabele ‘atoomklassen’. In tegenstelling tot frameworks zoals Bootstrap, die voorafgefabriceerde componenten (zoals knoppen en kaarten) bieden, biedt Tailwind alleen basisstijlen aan, waarmee je zelf de gewenste elementen kunt samenstellen. <code>text-center</code>、<code>p-4</code>、<code>bg-blue-500</code> Dankzij zulke onderliggende toolklassen kan elke design worden gecreëerd door deze klassen rechtstreeks in HTML te combineren.

De werking is gebaseerd op een configuratiebestand. In de rootmap van het project wordt dit bestand uitgevoerd. npx tailwindcss init De commando kan een bestand genereren met de naam tailwind.config.js De configuratiebestand bevat de instellingen voor Tailwind CSS. Dit bestand vormt de “motor” van Tailwind; ontwikkelaars kunnen hier het designsysteem aanpassen, waaronder kleuren, ruimtes, fonten en alle andere design-elementen (Design Tokens). Tijdens het bouwen van het project scannt Tailwind je HTML-, JavaScript- of andere templatebestanden om alle gebruikte toolklassen op te sporen, en genereert alleen de daadwerkelijk vereiste stijlregels in het uiteindelijke CSS-bestand. Dit proces heet “Tree Shaking” en zorgt ervoor dat het CSS-bestand zo compact mogelijk blijft.

Omgeving opzetten en projectconfiguratie

Er zijn verschillende manieren om Tailwind CSS te integreren in je project. De flexibeleste en meest aanbevolen manier is om dit te doen via PostCSS, dit is geschikt voor moderne build-tools zoals Vite, Webpack en Rollup.

Aanbevolen leesmateriaal Waarom kiezen voor Tailwind CSS? Een efficiënt en praktisch oplossing voor moderne webontwikkeling.。

Eerst moet je Tailwind en zijn afhankelijkheden installeren met npm of Yarn:

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 postcss autoprefixer
npx tailwindcss init

Deze opdracht genereert wat eerder is genoemd. tailwind.config.js File. Daarna moet je in het project een PostCSS-configuratiebestand maken (bijvoorbeeld)... postcss.config.js) en vervolgens… tailwindcss 和 autoprefixer Toevoegen als plugin:

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

Het belangrijkste stap is om je hoofd-CSS-bestand te maken (bijvoorbeeld)... src/styles.css 或 app/globals.css…) en gebruik hierbij @tailwind De instructie introduceert de kernstijlen van Tailwind:

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

Ten slotte moet je in de configuratie van je build-tool ervoor zorgen dat de CSS-bestand correct wordt ingeladen.

Praktische syntaxis en responsief ontwerp

De namen van de toolklassen in Tailwind zijn intuïtief begrijpbaar en volgen een bepaald patroon: “eigenschap – modifier – waarde”.<code>mt-4</code> Exprimeer margin-top: 1rem；<code>text-lg</code> Exprimeer font-size: 1.125rem；<code>hover:bg-gray-100</code> Dit betekent dat de achtergrondkleur wordt toegepast wanneer de muis over de tekst of elementen wordt gehouden.

Aanbevolen leesmateriaal Een dieper inzicht in het Tailwind CSS-framework: van praktische tools tot moderne front-end ontwikkelingspraktijken。

Responsive design is een sterke punt van Tailwind. Het framework bevat standaard vijf breakpoint-instellingen:sm (640px)md (768px)lg (1024px)xl (1280px) en 2xl (1536px). Je kunt eenvoudig een responsief ontwerp maken door voor de toolklasse een prefix te gebruiken dat aangeeft waar de breakpoint zich bevindt. Hier is een voorbeeld:<code>text-center md:text-left</code> Het tekstvak wordt links uitgelijnd op schermen van gemiddelde of grotere afmeting; op kleinere schermen wordt de tekst in het midden geplaatst.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- 移动端一列，平板两列，桌面端四列 -->
</div>

Naast de responsieve prefixen zijn er ook statusmodificatoren, bijvoorbeeld: hover:、focus:、active:、disabled: Etc., worden gebruikt om de interactieve status te beheersen. Door deze prefixen te combineren, is het mogelijk om zeer efficiënte en declaratieve stijlcodes te schrijven.

Custom en geavanceerde functies

Hoewel Tailwind direct uit de doos te gebruiken is, ligt zijn echte kracht in de hoge mate van personalisatie. Alles wat wordt aangepast, is... tailwind.config.js Het is voltooid in het bestand.

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.

Je kunt het standaardthema uitbreiden of overschrijven. Bijvoorbeeld door zelf gekozen kleuren toe te voegen of de verhoudingen tussen verschillende elementen aan te passen.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Het framework ondersteunt het gebruik van… @apply In CSS worden herhaalde combinaties van toolklassen extraheren en deze worden opgeslagen in zelfgemaakte CSS-klassen. Dit is handig voor stijlcombinaties die vaak en op een vaste manier in een project worden gebruikt.

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

Daarnaast is het mogelijk om dit te regelen door het instellen van de configuratie. content Tailwind kan de bestanden in je project (zoals HTML, JSX, Vue, Svelte, etc.) nauwkeurig scannen, zodat alleen de stijlen worden gecreëerd die daadwerkelijk worden gebruikt. Dit is van belang voor het optimaliseren van de prestaties, volgens de beste praktijken van 2026.

Aanbevolen leesmateriaal Core concepts en praktische patronen van Tailwind CSS: van atoomklassen tot responsief ontwerp。

Samenvatting

Tailwind CSS bevrijdt het ontwikkelen van stijlen van het schrijven van custom CSS, door te werken volgens de filosofie van praktische prioriteiten. In plaats van handmatig stijlen te definiëren, worden deze snel gecombineerd en geïntegreerd in het markup-systeem. Dit verlicht de cognitieve belasting en zorgt voor meer overzicht. Dankzij een strak ontwerpssysteem wordt consistentie gewaarborgd, en intelligente optimalisaties tijdens het bouwen van de website zorgen voor uitstekende prestaties. Tailwind biedt een efficiënte, onderhoudbare en zeer aanpasbare front-end-stijloplossing, van snel ontworpen prototypes tot grote, commerciële toepassingen. Het beheersen van de kernconfiguraties, de responsieve syntax en de mogelijkheden voor personalisatie is een belangrijke stap in het bouwen van moderne, responsieve websites.

Veelgestelde vragen (FAQ)

Hoe voorkom je dat de CSS-bestanden die door Tailwind worden generereerd te groot worden?
Door het correct instellen tailwind.config.js In het bestand content Zorg ervoor dat het veld alle paden naar je templatebestanden bevat (bijvoorbeeld: ./src/**/*.{html,js,ts,jsx,tsx,vue,svelte}De JIT (Just-In-Time)-compiler van Tailwind scant alleen deze bestanden en genereert alleen de toolklassen en stijlen die daadwerkelijk in je code worden gebruikt. Hierdoor blijft het uiteindelijke CSS-bestand zo klein mogelijk.

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.

Is het mogelijk om in hetzelfde project andere CSS-frames (zoals Bootstrap) te gebruiken?

Ja, dat is mogelijk, maar het wordt niet aanbevolen. Het gebruik van stijlklassen van verschillende frameworks op één en dezelfde element kan leiden tot onvoorspelbare en moeilijk te debuggen stijlconflicten. Het is beter om een van de twee frameworks te kiezen, of om Tailwind als je enige stijlbibliotheek te gebruiken. Als je ze wel moet combineren, moet je dit met zorg doen en de stijlprioriteiten bepalen met behulp van CSS-laagverordeningen of meer specifieke selectoren.

Hoe werkt het met donkere modus (dark mode) in Tailwind?

Tailwind biedt ondersteuning voor een donkere modus (dark mode) aan. Allereerst… tailwind.config.js Maak een nieuwe map in de app Instellingen. darkMode: 'class' 或 darkMode: 'media'。media De modi worden automatisch gewijzigd afhankelijk van de voorkeuren van het gebruikersysteem. De meest gebruikelijke modi zijn... class Het model biedt de mogelijkheid om handmatig te bewerken in HTML. <html> 或 <body> Toevoegen of verwijderen van labels <code>dark</code> Je kunt klassen gebruiken om de werking van bepaalde modi te beheersen. Daarna kun je, voordat je de toolklasse gebruikt, ... <code>dark:</code> prefixes worden gebruikt om de stijl in donkere modi te definiëren, bijvoorbeeld: <code>bg-white dark:bg-gray-800</code>。

Zal het gebruik van de `@apply`-instruktie het principe van praktische prioriteit verstoren?

@apply Instrukties moeten met voorzichtigheid worden gebruikt. Ze zijn vooral handig om stijlcombinaties te extraheren die in een project volledig identiek zijn en meerdere keren worden gebruikt, bijvoorbeeld buttonen, kaarten of invoervelden van een merk. Overmatig gebruik kan echter negatieve gevolgen hebben. @apply Om complexe componenten te ontwerpen met stijlregels, kun je inderdaad terugvallen op de traditionele manier van CSS-programmeren. Hierdoor verlies je enkele voordelen die het gebruik van CSS biedt, zoals de betere maintainability (onderhoudbaarheid). De beste praktijk is om CSS alleen te gebruiken wanneer dit echt nodig is: wanneer het kan leiden tot minder duplicatie in het codebestand en wanneer de combinatie van stijlregels zeer stabiel is. @apply。