Homepage/Kennis/Het bouwen van een website/De details van de inhoud

Een beginnetje met Tailwind CSS en praktijkervaring: het bouwen van een moderne, responsieve website vanaf nul.

3 minuten leestijd
2026-03-13
2,529
Ik verdien commissies wanneer je via de onderstaande links winkelt, zonder dat dit extra kosten voor jou met zich meebrengt.

In moderne front-endontwikkeling zijn efficiëntie en flexibiliteit altijd belangrijke aspecten. De traditionele manier van CSS-programmeren gaat vaak gepaard met problemen als een toename in de omvang van de stijlbestanden, namenconflicten en moeilijkheden bij het wisselen van context. Tailwind CSS Als een praktisch gericht, atomair CSS-framewerk biedt dit framework een groot aantal gedetailleerde toolklassen, waardoor ontwikkelaars direct in HTML kunnen bouwen aan elke gewenste design zonder de documentstroom te verlaten. Het is geen UI-bibliotheek met vooraf gedefinieerde componenten, maar een krachtig systeem voor het bouwen van custom designs. In dit artikel leert u vanaf nul de kernconcepten van het framework en bouwt u samen met praktische voorbeelden een moderne, responsieve webpagina.

Wat is Tailwind CSS en wat is de kernfilosofie ervan?

Tailwind CSS De kernfilosofie is “praktischheid eerst”. Het biedt geen functies of mogelijkheden zoals… <button class=“btn btn-primary”> In plaats van semantische componentklassen, wordt er een compleet set atomaire toolklassen aangeboden; elke klasse is alleen verantwoordelijk voor één klein, specifiek stijlaspect.text-center Wordt gebruikt om tekst centraal te plaatsen.p-4 Gebruikt voor marginen.bg-blue-500 Geschikt voor een blauwe achtergrond.

De voordelen van deze methode zijn dat het de ontwikkelingsprocessus aanzienlijk versnelt. Ontwikkelaars hoeven niet meer heen en weer te schakelen tussen HTML- en CSS-bestanden, en ze hoeven ook geen moeite te doen om te besluiten hoe een element moet worden genoemd. Alle stijlbeslissingen worden genomen in de markup-taal, waardoor het maken van prototypen en het iteratief ontwikkelen van designs zeer snel gaat.

Aanbevolen leesmateriaal Praktische gids voor Tailwind CSS: van nul een modern, responsief ontwerp bouwen。

De nadruk op praktische toepassingen versus de traditionele CSS-technieken

Ten opzicht van traditioneel handgeschreven CSS of het gebruik van componentenbibliotheken zoals Bootstrap, zijn de stijlen van het Practical Priorities-framework “instantieel” verkrijgbaar. Je creëert stijlen “instantieel” door klassennamen te combineren, in plaats van eerst een stijlklasse te definieren en deze vervolgens toe te passen op elementen. Dit voorkomt dat ongebruikte stijlcode wordt opgeslagen in het project, omdat je project uiteindelijk alleen de tools bevat die je daadwerkelijk gebruikt. Dit is mogelijk dankzij de optimalisaties in de bouwtools. PurgeCSSHet is mogelijk om zeer kleine CSS-bestanden voor productieomgevingen te genereren.

De websitebouwer van WordPress.com
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.
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 →

Hoe je Tailwind CSS gaat gebruiken

Installatie Tailwind CSS Er zijn verschillende manieren om het te installeren, maar de meest aanbevolen methode is via Node.js en npm. Daarnaast kan het worden geïntegreerd in je build-proces. Hier zijn de standaardstappen voor integratie met PostCSS:

Allereerst moet je het project initialiseren met npm en de benodigde afhankelijkheden installeren.

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Deze commando zal een… (de tekst is hier afgebroken; de volledige beschrijving van wat wordt gecreëerd, zou nodig zijn om een correcte vertaling te geven) tailwind.config.js Configuratiebestand. Daarna moet je de path van het templatebestand instellen, zodat... Tailwind Het is mogelijk om ongebruikte stijlen te verwijderen tijdens het productieproces.

Veranderen tailwind.config.js In het bestand content Deel:

Aanbevolen leesmateriaal Tailwind CSS: Een introductie en praktische tips voor het bouwen van moderne, responsieve websites vanaf nul。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [“./src/**/*.{html,js}”], // 根据你的项目结构调整路径
  theme: {
    extend: {},
  },
  plugins: [],
}

Maak vervolgens een hoofd-CSS-bestand (bijvoorbeeld src/input.css), en voeg daarnaast toe... Tailwind De instructies.

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

Ten slotte kun je de bouwprocedure uitvoeren met een commando, of deze integreren in je pakkettenmaker (zoals Vite of Webpack). Een eenvoudige manier om dit te doen is… package.json Script.

“scripts”: {
  “build”: “tailwindcss -i ./src/input.css -o ./dist/output.css --watch”
}

Run npm run build Daarna zal het gebeuren… dist In de map wordt een CSS-bestand gemaakt dat alle handige klassen bevat. Je kunt hiermee linken in je HTML en deze klassen direct 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%
Het logo van de websitebouwer Bezoek Bluehost.

De kerninstrumenten en methoden voor het opbouwen van layouts beheersen

Tailwind CSS De toolklasse dekt bijna alle CSS-attributen af en volgt een systeematische benamingsschema. Het begrijpen van dit schema is essentieel voor een efficiënte gebruik.

Systeem voor afstanden en maten

Tailwind Gebruik een methode die is gebaseerd op… rem De standaardafstandsschaal van de eenheid. De formatie van de klassenaam is meestal… {属性}{方向}-{大小}Als voorbeeld:
- p-4Toepassen in alle richtingen (padding) 1rem De margin binnenin.
- mt-2Toepassing 0.5rem De bovenmarge (margin-top) van...
- mx-autoDe buitenmarge in horizontale richting wordt op 'auto' gezet, wat gebruikelijk is om block-level-elementen centraal te plaatsen.

Maatklassen zoals w-64(Breedte: 16rem)h-screenHetzelfde principe geldt ook voor andere instellingen, bijvoorbeeld een hoogte van 100vh (100 procent van de schermhoogte).

Aanbevolen leesmateriaal Tailwind CSS: Een handleiding voor beginners: van nul beginnen met het bouwen van moderne, responsieve webpagina's。

Kleur en achtergrond

De structuur van de kleurklassenamen is als volgt: {属性}-{颜色}-{深浅}Als voorbeeld:
- text-gray-800Zet de tekstkleur op een grijs niveau van 800.
- bg-indigo-600Zet de achtergrondkleur op een schaduw van indigo (niveau 600).
- border-red-300Zet de randkleur op de rode kleurniveau 300.

Responsief ontwerp en breekpunten

Tailwind Het responsieve ontwerp gebruikt een mobiele-first-strategie. De standaardstijlen zijn geschikt voor alle schermgrootten, maar om stijlen op grotere schermen te toepassen, moet er een prefix worden toegevoegd. Voorbeeld:
- text-smGebruik een klein lettertype op alle schermen.
- md:text-baseGebruik de standaardtekengrootte op schermen van middelgrote afmeting (≥768 px) of groter.
- lg:flexOp grote schermen (≥1024px) en groter moet de weergavemodus worden ingesteld op 'flex'.

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.
LOGO Ga naar hosting.com.

Praktijk: Een responsieve navigatiebalk en heldenzone bouwen

Nu gaan we, met de kennis die we hebben opgedaan, een simpel webpagina bouwen met een responsief navigatiebord en een 'hero'-gebied.

Een responsief navigatiebord bouwen

We gaan een navigatiebalk maken die op mobiele apparaten wordt samengevouwen en op desktop-apparaten horizontaal wordt uitgeklapt.

<nav class="“bg-white" shadow-lg”>
  <div class="“max-w-6xl" mx-auto px-4”>
    <div class="“flex" justify-between”>
      <div class="“flex" space-x-7”>
        <a href="/nl/“/#”" class="“flex" items-center py-4”>
          <span class="“font-semibold" text-gray-500 text-lg”>Mijn merk</span>
        </a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="“hidden" md:flex items-center space-x-1”>
        <a href="/nl/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>Homepage</a>
        <a href="/nl/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>service</a>
        <a href="/nl/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>Over ons</a>
        <a href="/nl/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>Contact</a>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="“md:hidden" flex items-center”>
        <button class="“outline-none" mobile-menu-button”>
          <svg class="“w-6" h-6 text-gray-500” fill="“none”" stroke-linecap="“round”" stroke-linejoin="“round”" stroke-width="“2”" viewbox="“0" 0 24 24” stroke="“currentColor”">
            <path d="“M4" 6h16m4 12h16m4 18h16”></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端菜单内容 -->
  <div class="“hidden" mobile-menu md:hidden”>
    <a href="/nl/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>Homepage</a>
    <a href="/nl/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>service</a>
    <a href="/nl/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>Over ons</a>
    <a href="/nl/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>Contact</a>
  </div>
</nav>

De navigatiebalk gebruikt… flex Layout, via… hidden md:flex 和 md:hidden Om de weergave op verschillende schermen te kunnen beheersen (oftewel om bepaalde elementen op sommige schermen te tonen en op andere schermen te verbergen).

Construct the Hero Area

Volgens de opgegeven instructies moet je nu een aantrekkelijke 'heldenzone' (hero zone) creeren.

<section class="“bg-gradient-to-r" from-blue-50 to-indigo-100 py-20”>
  <div class="“max-w-6xl" mx-auto px-4 sm:px-6 lg:px-8 text-center”>
    <h1 class="“text-4xl" md:text-6xl font-extrabold text-gray-900 mb-6”>
      Build the future with Tailwind CSS
    </h1>
    <p class="“text-lg" md:text-xl text-gray-700 max-w-3xl mx-auto mb-10”>
      Een praktisch CSS-framewerk dat je in staat stelt om moderne, responsieve gebruikersinterfaces snel te bouwen zonder het HTML-tekenbestand te verlaten. Vaarwel met de moeilijke stijlbestanden en omarm een efficiënte ontwikkelingsproces.
    </p>
    <div class="“space-x-4”">
      <a href="/nl/“/#”" class="“inline-block" bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg shadow-md hover:bg-indigo-700 transition duration-300”>
        Ga aan de slag
      </a>
      <a href="/nl/“/#”" class="“inline-block" bg-white text-indigo-600 font-semibold py-3 px-8 rounded-lg shadow border border-indigo-600 hover:bg-gray-50 transition duration-300”>
        Meer informatie
      </a>
    </div>
  </div>
</section>

In deze regio wordt een grijzacht achtergrond gebruikt met een gradient-effect. bg-gradient-to-rResponsive font size text-4xl md:text-6xl En knoppen met een hover-effect.

Samenvatting

Tailwind CSS Met zijn unieke en praktische methodologie voor stijlbeheer heeft dit hulpmiddel de manier waarop ontwikkelaars hun stijl definieren radicaal veranderd. Het verplaatst de beslissingen over stijl van de stylesheet naar de markuptaal en gebruikt combinaties van gedetailleerde toolklassen om complexe ontwerpen te realiseren, waardoor de ontwikkelingsefficiëntie en designflexibiliteit enorm zijn verbeterd. In het begin is het nodig om enkele classnamen te onthouden, maar eenmaal vertrouwd met het systeem, is de ontwikkelings snelheid en de mogelijkheid tot onbeperkte aanpassing ongeëvenaard ten opzichte van traditionele methoden. Van eenvoudige, praktische klassen tot complexe, responsieve lay-outs: dit hulpmiddel biedt alle mogelijkheden om stijlen te bepalen.Tailwind Er wordt een compleet en uitbreidbaar systeem aangeboden, dat zeer geschikt is voor het gehele ontwikkelingsproces, van het prototype tot de productie.

Veelgestelde vragen (FAQ)

Zorgt Tailwind CSS ervoor dat het HTML-geheel te omvangrijk wordt?

Ja, maar dit is een afweging. Het toevoegen van klassennamen maakt de HTML-code inderdaad complicerder. Daarentegen leidt dit tot een aanzienlijke verbetering in de ontwikkelingsefficiëntie en tot meer controle over het gewicht van de CSS-bestanden. Door ongebruikte stijlen te verwijderen met hulpmiddelen, zijn de CSS-bestanden in de productieomgeving meestal kleiner dan handgeschreven CSS-bestanden. Veel ontwikkelaars vinden dat het gemakkelijker is om stijlen in HTML te beheren dan in aparte CSS-bestanden.

Hoe kun je het standaardthema van Tailwind customiseren?

Customization is mainly achieved by making modifications. tailwind.config.js In het bestand theme Deze functionaliteit kan worden gerealiseerd door enkele aanpassingen. Je kunt eenvoudig de standaardinstellingen voor kleuren, fonten, ruimtes en andere configuraties uitbreiden of overschrijven. Als je bijvoorbeeld een merkkleur wilt toevoegen, kun je dit doen door… theme.extend.colors Voeg een nieuw kleur-paars toe. Deze configuratie methode zorgt ervoor dat het designsysteem perfect kan worden geïntegreerd met het project.

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

Tailwind CSS Het kan perfect worden geïntegreerd met bijna alle moderne front-end frameworks, zoals React, Vue.js, Angular, Svelte, etc. Er zijn ook officiële handleidingen en beste praktijken voor het installeren van deze frameworks beschikbaar. De functionaliteiten van de toolklasse passen zeer goed bij het component gebaseerde ontwikkelingsmodel; de stijl van elk component is nauw verbonden met zijn eigen markup.

Zal het uiteindelijke CSS-bestand in een productieomgeving erg groot zijn?

Nee. Dat is precies wat... Tailwind CSS De ingenieuze details: bij het bouwen van de productieversie wordt dit gebruikt. PurgeCSSMet tools van dit type worden je templatebestanden gescannd, zodat alleen de tools en stijlen worden behouden die daadwerkelijk worden gebruikt en alle ongebruikte stijlen worden verwijderd. Het resultaat is een CSS-bestand dat meestal slechts enkele KB tot enkele tientallen KB groot is, dus zeer compact.

De volgende stap, wat moeten we als volgende doen?

Als u snel een website wilt maken, raden we u aan om verder te gaan met het vergelijken van de template-mogelijkheden, de schaalbaarheid en de kosten van het onderhoud op de lange termijn van verschillende websitebouwplatforms.

Voor meer informatie en praktische kennis

De volgende content is relevant voor het onderwerp van dit artikel en is geschikt voor verder lezen. Het kan vaak effectief zijn om eerst het artikel te lezen dat het dichtst bij uw huidige vraagstuk staat en vervolgens geleidelijk aan artikelen over aanverwante onderwerpen te bekijken.

Labels: