Diepgravend onderzoek naar het Tailwind CSS-framework: van nul beginnen met het bouwen van moderne, responsieve interfaces

Wat is Tailwind CSS? Een nieuwe, innovatieve benadering die de traditionele manieren van CSS-ontwerp ver overstijgt.

In de huidige front-end ontwikkelingswereldTailwind CSSHet werd snel het favoriete framework voor het bouwen van moderne gebruikersinterfaces, dankzij de unieke filosofie van 'Utility-First' (utiliteit eerst). Het is echter niet hetzelfde als de frameworks die we allemaal kennen.Bootstrap或BulmaDeze UI-frames werken met vooraf gedefinieerde componenten, maar zijn in feite gebaseerd op een CSS-framework dat functionele aspecten voorrang geeft. Dit betekent dat ontwikkelaars niet vaak tussen HTML- en CSS-bestanden hoeven te schakelen, en dat ze zich geen zorgen hoeven te maken om semantische namen voor elk element te bedenken. Ze kunnen snel stijlen toevoegen door eenvoudig vele, gedetailleerde CSS-klassen te combineren in de HTML-taggen.

De belangrijkste voordelen zijn dat de ontwikkelingsefficiëntie en het designniveau aanzienlijk zijn verbeterd. Dit wordt mogelijk gemaakt door het aanbieden van een set praktische componenten waarbij afstanden, kleuren, fontgrootten en andere eigenschappen allemaal volgens een uniforme schaal zijn gestructureerd (bijvoorbeeld zijn afstanden gebaseerd op kloppen van de getal 4).Tailwind CSSEr is zorg gedragen voor een harmonieus en geconsolideerd ontwerp tussen de verschillende elementen van de interface. Daarnaast is de interface zeer aanpasbaar; ontwikkelaars kunnen deze aanpassingen maken door veranderingen aanbestelling in de wortelmap (root directory) van het project.tailwind.config.jsDe configuratiebestanden bieden de mogelijkheid om eenvoudig de standaardthemakleuren, brekpunten, ruimteverhoudingen en andere instellingen aan te passen of te overschrijven, zodat ze perfect passen bij elk ontwerpssysteem.

Core concepts and working principles

Om dit effectief te gebruiken…Tailwind CSSJe moet de kernwerking van dit systeem begrijpen. In plaats van voor elke component een aparte CSS-klasse te schrijven, worden er veel atomaire (kleine, herbruikbare) toolklassen aangeboden.

Aanbevolen leesmateriaal Tailwind CSS: van het begin tot de volle beheersing: een compleet handboek voor het bouwen van moderne, responsieve webpagina's。

Een CSS-architectuur waarbij praktische klassen voorrang hebben

Elk eenTailwind CSSElke klasse corresponde tot één enkele CSS-attribuut. Bijvoorbeeld, de naam van de klasse…text-centerCorresponderend mettext-align: center;，mt-4Corresponderend metmargin-top: 1rem;(Verondersteld dat 1 eenheid = 0,25rem is.) Ontwikkelaars bouwen complexe designs op door deze klassen te combineren. Om bijvoorbeeld een knop te maken met een binnenmaat, een blauwe achtergrond en ronde hoeken, hoef je alleen maar in het HTML te schrijven:<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">按钮</button>Deze methode verkleint de omvang van de CSS-bestanden (aangezien ongebruikte klassen worden verwijderd tijdens de productie-build), waardoor de stijl en de structuur nauwer met elkaar zijn verbonden, wat het onderhoud eenvoudiger maakt.

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 →

Responsief ontwerp en toestandsvarianten

Tailwind CSSDe responsieve designstrategie is uiterst elegant. Het systeem gebruikt een prefix-systeem dat prioriteit geeft aan mobiele apparaten; de standaardstijlen worden toegepast op mobiele apparaten, terwijl stijlen voor grotere schermen worden overgenomen door het toevoegen van een prefix.text-sm md:text-baseDit betekent dat op mobiele apparaten een kleinere font wordt gebruikt, en op schermen van middelgrote afmeting (md) en groter een standaardfont wordt gebruikt. De prefixen voor deze breakpoint-indicatoren zijn bijvoorbeeld:sm、md、lg、xl、2xlAlles kan worden ingesteld.

Daarnaast bevat het framework een groot aantal voorwaartse suffixen voor verschillende staatsopties (status variations).hover:、focus:、active:、disabled:Dit maakt het heel gemakkelijk om interactieve stijlen toe te voegen. Bijvoorbeeld:bg-blue-500 hover:bg-blue-700Het is mogelijk om de achtergrondkleur te verdonkeren wanneer de muis erover wordt gehouden.

Optimalisatie van de productieomgeving en het gebruik van PurgeCSS

OmdatTailwind CSSTijdens de ontwikkelingsfase wordt een groot CSS-bestand gemaakt dat alle mogelijke toolklassen bevat. Dit bestand is niet geschikt om direct te gebruiken in de productieomgeving. Daarom is PurgeCSS diep geïntegreerd (in de nieuwere versies heet het “Purge” of ‘Content Scan’). Tijdens het productieproces wordt…Tailwind CSSDe tool scant je projectbestanden (zoals HTML, JavaScript, Vue-componenten, JSX, etc.) om alle gebruikte toolklassen op te sporen. Daarna worden alle ongebruikte CSS-regels verwijderd, waardoor een zeer geoptimaliseerde CSS-bestand wordt gecreëerd dat alleen de vereiste stijlen bevat. Dit proces wordt meestal gerealiseerd door PostCSS-plug-ins te configureren of door andere specifieke tools te gebruiken.tailwind.config.jsMaak een nieuwe map in de app Instellingen.contentDe route moet worden afgerond.

Vanaf nul instellen en gebruiken

Volgens de opgave gaan we je stap voor stap begeleiden bij het voltooien van een proces of taak.Tailwind CSSDe initiële configuratie en basisgebruik van het project.

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

Initiatie en installatie van het project

Eerst moet je het pakket via npm of yarn installeren.Tailwind CSSInstalleer het in je project. Omdat het als PostCSS-plugin werkt, moet je ook andere vereiste componenten installeren.postcss和autoprefixer。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Uitvoerennpx tailwindcss initHet commando genereert een standaardversie.tailwind.config.jsConfiguratiebestand.

Uitleg over de configuratiebestand

Genererend...tailwind.config.jsDit is het hart van het framework. Hier moet je de paden van de bestanden instellen die de bouwtools moeten scannen, om zodat de stijlzuivering (Purge) in de productieomgeving goed werkt.

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.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"], // 根据你的项目结构调整
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4', // 扩展自定义颜色
      },
      spacing: {
        '128': '32rem', // 扩展自定义间距
      }
    },
  },
  plugins: [],
}

在contentHet is zeer belangrijk om in het array de path van je templatebestand op te geven. Je kunt ook...theme.extendEr worden onderwerpen uitgebreid onder het object, in plaats van ze rechtstreeks te overschrijven, om de standaardontwerpsschaal niet te verstoren.

Stijlen invoeren en met de ontwikkeling beginnen

In je hoofdCSS-bestand (bijvoorbeeld…)src/styles.css或input.cssIn dit voorbeeld wordt gebruikgemaakt van@tailwindInstrukties om te injecterenTailwind CSSDe stijlen voor alle lagen.

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 你可以在@layer指令内添加自定义类 */
@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;
  }
}

@tailwind baseBasic stijlen injecteren (de browserinstellingen op hun standaardwaarden zetten)@tailwind componentsInject component classes (wanneer je bepaalde plugins hebt gebruikt)@tailwind utilitiesInject alle toolklassen. Gebruik ze.@applyDe instructies kunnen tools samenvoegen tot een nieuwe, aangepaste componentklasse, net zoals in het voorbeeld wordt beschreven..btn-primaryTen slotte moet je ervoor zorgen dat je build-proces (bijvoorbeeld met Vite of Webpack) is ingesteld om PostCSS te gebruiken om deze CSS-bestand te verwerken.

Aanbevolen leesmateriaal De krachtige mogelijkheden van Tailwind CSS ontdekken: een gids van de basis tot praktische toepassingen。

Praktijk in het bouwen van moderne, responsieve interfaces

Nadat je de basis hebt beheerd, kunnen we deze kennis toepassen.Tailwind CSSEen typisch modern, responsief navigatiebord en kaartcomponent bouwen, om de krachtige mogelijkheden van het lay-out te demonstreren.

Realisatie van een responsieve navigatiebalk

Hieronder staat een simpel voorbeeld van een responsief navigatiebord: op mobiele apparaten worden de menu-items verborgen en een hamburgerknop weergegeven, terwijl op schermen van gemiddelde grootte alle links horizontaal worden weergegeven.

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.

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!--  Logo -->
      <div class="text-white font-bold text-xl">Mijn merk</div>

<!-- 桌面端导航链接 -->
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Homepage</a>
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Over</a>
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">service</a>
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
      </div>

<!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="text-gray-400 hover:text-white focus:outline-none">
          <!-- 汉堡图标 SVG (此处简化) -->
          <span class="sr-only">Open het hoofdmenu.</span>
          ...
        </button>
      </div>
    </div>
  </div>

<!-- 移动端下拉菜单 (需配合JS切换) -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Homepage</a>
      <!-- ... 其他链接 -->
    </div>
  </div>
</nav>

In dit voorbeeld wordt gebruik gemaakt van...flex、justify-between、space-x-4Gebruik tools voor het opmaken van de lay-out en voer deze vervolgens uit.hidden md:flex和md:hiddenHet beheersen van het tonen en verbergen van elementen maakt het gemakkelijk om een responsieve omstelling van het ontwerp te realiseren.

Flexibele kaartcomponentenontwerp

Tailwind CSSHet wordt heel eenvoudig om prachtige kaarten te maken met schaduwen, ronde hoeken en effecten wanneer je ze met de muis overhaalt.

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white hover:shadow-2xl transition-shadow duration-300">
  <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x250" alt="Kaartafbeelding">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800">Prachtige blogtitels</div>
    <p class="text-gray-600 text-base">
      Dit is een beschrijving van de inhoud van deze kaart. Met Tailwind CSS kunnen we snel stijlen toepassen op tekst, marginaal en kleuren.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#-label 1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#-label 2</span>
    <span class="inline-block bg-brand-blue rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#: aangepaste kleur</span>
  </div>
</div>

Hier wordt laten zien hoe dit kan worden gebruikt.rounded-xl、shadow-lg、hover:shadow-2xl和transition-shadowWe hebben visuele laagstructuren en subtiele interacties gecreëerd. Daarnaast hebben we ook aangepaste kleuren gebruikt.bg-brand-blueHet is...tailwind.config.jsHet is uitgebreid door middel van een definitie in het Chinese.

Samenvatting

Tailwind CSSDe methodeologie die gebruikmaakt van klassen met prioriteit, heeft de manier waarop ontwikkelaars CSS schrijven radicaal veranderd. Het verplaatst de beslissingen over het uiterlijk van de pagina’s van de style sheets naar de markup-elementen zelf. Door atoomklassen te combineren, kan men snel een design realiseren, terwijl de consistentie van het design-systeem en de flexibiliteit voor aanpassingen worden gewaarborgd. De ingebouwde responsieve prefixen en staatsovariaties maken het zeer eenvoudig om interfaces te creeren die op meerdere apparaten werken en over een rijke interactie beschikken. Hoewel het in het begin nodig is om veel klassennamen te onthouden, is de verbeterde ontwikkelings snelheid en de vereenvoudigde onderhoud van de stijlregels revolutionair. In combinatie met de krachtige functies voor productieoptimalisatie (Purge),…Tailwind CSSZonder twijfel is dit een krachtig hulpmiddel voor het bouwen van moderne, high-performance webapplicaties.

Veelgestelde vragen (FAQ)

Hoe kun je te lange classnaamstrings in Tailwind CSS beheersen?
Als de namen van klassen in HTML te lang worden, kan dit de leesbaarheid beïnvloeden. Er zijn enkele strategieën die worden aanbevolen om dit te verhelpen.

Allereerst kan je gebruikmaken van...@applyDe instructies bevatten aanwijzingen om gebruikelijke toolklassen te extraheren uit de broncode en deze in een CSS-bestand op te slaan, waardoor er zelfgemaakte componentklassen worden gecreëerd (zoals het voorbeeld van de knop in het tekstverhaal aangeeft). Voor frameworken die gebaseerd zijn op componenten (zoals React en Vue), kunnen deze klassennamen worden opgenomen in de componenten zelf, als onderdeel van de stijldefinities. Daarnaast zijn er ook andere methoden beschikbaar voor het beheer van deze klassen.classnames或clsxDankzij dergelijke JavaScript-toolbibliotheken kunnen klassenamen onder bepaalde voorwaarden worden gecombineerd, waardoor JSX-/template-bestanden opgeruimd en overzichtelijk blijven.

Zullen de stijlen van Tailwind CSS conflicteren met de bestaande stijlen van het project?

Tailwind CSSDeze problematie is al goed onderweg tijdens het ontwerp worden genomen. De basislaag…@tailwind baseEr wordt een milde CSS-strategie voor het herstellen van de instellingen gebruikt (Modern Reset), met als doel een consistente en onverstorende uitgangssituatie te creëren. Deze strategie veroorzaakt over het algemeen geen ernstige conflicten met bestaande, zorgvuldig opgestelde stijlregels.

Om conflicten zo veel mogelijk te voorkomen, wordt het aanbevolen om nieuwe componenten of nieuwe pagina's geleidelijk te introduceren.Tailwind CSSJe kunt…tailwind.config.jsVoor toolklassen wordt een aangepast prefix toegevoegd.prefixOptionen), bijvoorbeeld het instellenprefix: 'tw-'Dan zullen alle toolklassen worden veranderd in...tw-text-center、tw-mt-4In deze vorm wordt de namenspace volledig geïsoleerd.

Is het mogelijk om een donkere modus te realiseren met Tailwind CSS?

Ja.Tailwind CSSEr wordt topondersteuning geboden voor het donkere thema (dark mode), waardoor deze direct na het opstarten van het apparaat beschikbaar is.

Je moet...tailwind.config.jsMaak een nieuwe map in de app Instellingen.darkMode: 'media'或darkMode: 'class'De eerste variant schakelt automatisch om afhankelijk van de themavoorkeuren van het gebruikersbesturingssysteem, terwijl de tweede variant het mogelijk maakt om dit handmatig te doen door te werken met het root-element van het HTML-bestand (bijvoorbeeld…)<html>Toevoegen of verwijderen op (…)class="dark"Om de schakelingen te beheersen: wanneer dit is ingeschakeld, kun je het gebruiken.dark:Variatieprefixen worden gebruikt om de stijl in donkere modi te definiëren. Voorbeeld:bg-white dark:bg-gray-800。

Welke UI-frames of libraries zijn geschikt om te gebruiken met Tailwind CSS?

Tailwind CSSHet past perfect bij bijna alle moderne front-end UI-bibliotheken of frameworks, omdat het zich alleen op het stijlaspect richt en geen rekening houdt met de logica van de componenten.

Het is vooral handig om te gebruiken in combinatie met componentenframeworks als React, Vue, Angular en Svelte. De community beschikt over een groot aantal integratieplugins en componentenbibliotheken die zijn aangepast aan deze frameworks.Headless UIStijlloze UI-componenten die officieel worden aangeboden door Tailwind Labs.daisyUI、FlowbiteEn zo: deze bibliotheken bieden de mogelijkheid om…Tailwind CSSDe interactieve componenten die zijn opgebouwd met behulp van stijlregels (style rules), kunnen de ontwikkelingsefficiëntie nog verder verbeteren.