Het bouwen van een moderne, responsieve website met Tailwind CSS: van beginner tot expert

Wat is Tailwind CSS?

Tailwind CSS is een CSS-framework dat focus legt op functionaliteit. Het biedt een reeks onderdelen van lage complexiteit die gemakkelijk te combineren zijn, waardoor ontwikkelaars snel gebruikersinterfaces kunnen bouwen. In tegenstelling tot traditionele frameworks zoals Bootstrap of Foundation, die geprefabriceerde componenten (zoals knoppen en kaarten) bieden,Tailwind CSS Laat je ontwerp “samenvoegen” door deze gedetailleerde klassen rechtstreeks in het HTML te gebruiken.

De kernfilosofie is “praktischheid bovenal”. Dat betekent dat je geen meer behoeft hebt om voor elke element aparte CSS-regels te schrijven, en dat je ook niet meer heen en weer hoeft te switchen tussen HTML- en CSS-bestanden. Als je bijvoorbeeld een knop wilt maken met een binnenruimte, een blauwe achtergrond en witte tekst, kun je dit eenvoudig doen door…

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
  点击我
</button>

In dit voorbeeld:px-4 和 py-2 Er zijn aparte marginen ingesteld voor de horizontale en verticale richting.bg-blue-500 De achtergrondkleur is ingesteld.text-white De tekstkleur is ingesteld.rounded-lg Er zijn grote ronde hoeken toegevoegd. Dit methodische onderzoek heeft de ontwikkelings- en onderhoudssnelheid aanzienlijk verbeterd, omdat de stijl nauw verbonden is met de HTML-structuur en de namen van de klassen zeer duidelijk zijn.

Aanbevolen leesmateriaal De kernconcepten van Tailwind CSS beheersen: van praktische klassen tot het praktisch toepassen van responsief ontwerp。

Hoe je Tailwind CSS gaat gebruiken

Ga aan de slag Tailwind CSS Er zijn verschillende manieren om dit te doen; de meest voorkomende zijn via het officiële CLI-hulpmiddel of door integratie met build-tools.

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 →

Snel starten met Tailwind CLI

Dit is de meest directe manier, vooral handig voor het leren en het snel maken van prototypes. Allereerst moet je het project initialiseren met npm of yarn en de benodigde pakketten installeren. Tailwind CSS。

npm install -D tailwindcss
npx tailwindcss init

Dit zal een configuratiebestand genereren. tailwind.config.jsVervolgens maak je een CSS-bestand (bijvoorbeeld <). src/input.css), en voeg de Tailwind-commando's toe:

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

Vervolgens worden CLI-commando's gebruikt om deze CSS-bestand in de gaten te houden en de uitgevoerde compilatie van het CSS te bewaken.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Ten slotte moet je de genereerde inhoud in je HTML-bestand invoeren. output.css Zodra de bestanden zijn geïnstalleerd, kun je de handige klassen van Tailwind gebruiken.

Aanbevolen leesmateriaal Tailwind CSS volledig beheersen: een praktische handleiding voor het bouwen van moderne, responsieve websites.。

Integreren met front-end frameworks

Tailwind CSS De integratie met moderne front-end frameworks verloopt zeer soepel. In projecten met Vue of React kan bijvoorbeeld worden geïntegreerd met PostCSS. Wanneer je Create React App gebruikt, kun je PostCSS installeren.

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

Dit zal alles tegelijkertijd genereren. tailwind.config.js 和 postcss.config.js Configuratiebestand. Daarna, in het CSS-bestand van de projectingang (bijvoorbeeld...) src/index.cssVoeg die drie items toe in het )-teken. @tailwind Een instructie is voldoende.

Core concepts and practical classes

Om het efficiënt te gebruiken… Tailwind CSSJe moet de kernprincipes van het praktische namensysteem en de principes van responsief ontwerp begrijpen.

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.

Praktisch namensysteem voor klassen

Tailwind CSS De namen van de klassen volgen een consistent namenschema, dat meestal bestaat uit “attribuut-modifier-waarde”. Voorbeeld:
Marges:m-4Alle marginaalbereiken (all margin ranges).mt-2(Margin boven)
Kleur:text-gray-800，bg-red-300
Afmetingen:w-64(Breedte: 16rem)h-screen(Hoogte: 100vh)
Indeling:flex，justify-center，items-center

Cijfers corresponderen meestal met een bepaald ontwerpssysteem (afstanden, fontgrootte, etc.) en zijn gebaseerd op een standaardbasiseenheid van 4 px. Daarnaast worden ook verschillende staatsovergangen (state changes) ondersteund, bijvoorbeeld wanneer er met de muis wordt overgegaan (hover-effecten).hover:bg-blue-700focusfocus:ring-2Je hoeft alleen maar een prefix voor de staat toe te voegen aan de naam van de klasse.

Een responsief ontwerp bouwen

Tailwind CSS Er wordt een mobiel-first responsieve strategie gevolgd. De standaardpraktische klassen zijn ontworpen voor mobiele apparaten; om stijlen op grotere schermen te kunnen toepassen, is het gebruik van een responsief prefix nodig. Het systeem voor breakpoint-beheer omvat… sm, md, lg, xl, 2xl。

Aanbevolen leesmateriaal Van het begin tot de volle meesterheid: maak kennis met Tailwind CSS en bouw moderne, responsieve websites。

Als bijvoorbeeld een element op een mobiele telefoon de volle breedte beslaat, op een scherm van gemiddelde grootte de breedte wordt halverd en op een groot scherm de breedte wordt verder verkleind tot een kwart, kan dit zo worden beschreven:

<div class="w-full md:w-1/2 lg:w-1/4">
  <!-- 内容 -->
</div>

Dit maakt het zeer eenvoudig en intuïtief om complexe, responsieve interfaces te bouwen. Alle regels voor het responsieve gedrag van de interface zijn namelijk opgeborgen in één en dezelfde element, waardoor ze direct te zien zijn.

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.

Praktijk: Een responsieve navigatiebalk bouwen

Laten we met een volledig voorbeeld kijken hoe we met de gekende technieken een moderne, responsieve navigatiebalk kunnen bouwen.

HTML-structuur en mobiele styling

Eerst bouwen we de basisstructuur op. Op mobiele apparaten bevat de navigatiebalk meestal het merklogo en een hamburgermenu-knop.

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 品牌标识 -->
      <div class="flex-shrink-0">
        <span class="text-white text-xl font-bold">Mijn website</span>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
          <!-- 汉堡图标 SVG -->
          <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Homepage</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Over</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">service</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobile-menu" class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Homepage</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Over</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">service</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a>
    </div>
  </div>
</nav>

Hier gebruiken we… md:hidden 和 hidden md:block Om de weergave en het verbergen van verschillende elementen op de desktop- en mobiele versie te kunnen beheersen.

Interactie en maatwerkconfiguratie toevoegen

De navigatiebalk vereist JavaScript om het menu op mobiele apparaten te kunnen openen en sluiten. Voeg een simpel script toe:

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  menuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

Daarnaast kunt u ook de kleur van het thema willen veranderen. Dit kan worden gedaan door de instellingen te bewerken. tailwind.config.js Deze functionaliteit wordt gerealiseerd door bestanden. Een voorbeeld is het uitbreiden van het palet van een thema.

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3B82F6', // 自定义主色调
        'secondary': '#10B981',
      }
    }
  },
  variants: {},
  plugins: [],
}

Daarna kun je de namen van de klassen gebruiken. bg-primary 和 text-secondary Ja. Met behulp van een configuratiebestand kun je alle designparameters, zoals de ruimte tussen elementen, de font en de pauzes, volledig aanpassen, zodat ze perfect passen bij je merkdesignsysteem.

Samenvatting

Tailwind CSS Het heeft de manier waarop ontwikkelaars CSS schrijven drastisch veranderd door een praktische en prioriteiten gebaseerde benadering te hanteren. Het integreert stijlbeslissingen rechtstreeks in HTML-taggen, waardoor de ontwikkelingsefficiëntie en het designeergeboden een stuk hoger zijn. Het begint eenvoudig met het maken van snel prototypes en kan ook worden gebruikt voor het bouwen van complexe, responsieve componenten. Het intuïtieve classnaamssysteem en de krachtige configuratie mogelijkheden maken het zeer geschikt voor zowel snel prototyping als voor grote, professionele projecten. Het beheersen van de kernconcepten, zoals het geven van praktische namen aan klassen, het gebruik van responsieve prefixen en het aanpassen van configuratiebestanden, is essentieel voor het bouwen van moderne, responsieve websites.

Veelgestelde vragen (FAQ)

Zijn de CSS-bestanden die met Tailwind CSS worden gegenereerd erg groot?

Nee. In een productieomgeving…Tailwind CSS PurgeCSS (of de ingebouwde JIT-engine) wordt gebruikt om je HTML-, JavaScript- en andere templatebestanden te scannen en alle ongebruikte CSS-klassen automatisch te verwijderen. Het eindresultaat, de CSS-bestand, beslaat meestal maar enkele KB, waardoor het een stuk kleiner is dan veel traditionele frameworks.

Hoe behoud je in teamprojecten een consistentie in de stijl?

Tailwind CSS Het bevordert de consistentie door een beperkt ontwerpssysteem aan te bieden, waaronder vaste kleuren en regels voor het gebruik van ruimtes (proporties). Bovendien kunnen teamleden samen een geconsolideerd ontwerpssysteem onderhouden en uitbreiden. tailwind.config.js De configuratiebestanden bepalen de kleuren, fonten, brekpunten en andere instellingen die specifiek zijn voor het project. Door de @apply-commando te gebruiken, kunnen duplicerende en handige klassencombinaties uit het CSS worden gehaald en worden deze omgevormd in aangepaste componentklassen. Dit bevordert de consistentie in het uiterlijk van het project.

Hoe kun je de stijl van een component overschrijven of aanpassen?

Er zijn voornamelijk drie manieren om dit te doen. De eerste is om rechtstreeks in het HTML gebruik te maken van specifiekere, praktische klassen; dit is de meest voorkomende methode. De tweede is om de thema-instellingen in een configuratiebestand uit te breiden of te overschrijven. De derde is om dit te doen in een CSS-bestand. @apply De instructie combineert meerdere praktische klassen in een nieuwe klasse, of schrijft zelfgemaakte CSS en gebruikt deze. @layer De instructie wordt gebruikt om dit te injecteren in Tailwind. base、components 或 utilities In de laag wordt de prioriteit beheerd.

Welke UI-bibliotheken of 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, Angular, Svelte enz. Het werkt meestal als een onderliggend stijltool en samen met het componentensysteem van deze frameworks. Er zijn ook enkele UI-componentbibliotheken die zijn gebouwd op Tailwind, zoals Headless UI (officiële, stijlloze interactieve componenten), DaisyUI, Flowbite enz. Deze bieden vooraf gemaakte componenten en bieden je tegelijkertijd de mogelijkheid om Tailwind nog verder aan te passen.