Een diepgaande analyse van Tailwind CSS: een praktische handleiding om het te leren en onder de knie te krijgen.

Wat is Tailwind CSS?

Tailwind CSS is een praktisch CSS-framework dat focus legt op functionaliteit. In tegenstelling tot traditionele frameworks met vooraf gedefinieerde componenten zoals Bootstrap en Bulma, biedt Tailwind geen complete UI-componenten zoals knoppen of kaarten aan. In plaats daarvan biedt Tailwind een groot aantal gedetailleerde, specifiek ontworpen toolklassen voor specifieke doeleinden. text-center、p-4、bg-blue-500Ontwikkelaars kunnen door deze toolklassen in HTML te combineren, net zoals ze met Lego-blokjes werken, zeer snel geheel aangepaste gebruikersinterfaces bouwen. Het kernidee van deze methode is dat de ontwikkelaars de controle over het uiterlijk van de interface terugkrijgen, waardoor ze niet meer veel extra CSS hoeven te schrijven om de standaardstijlen van het framework te overschrijven.

Core design philosophy

De kern van deze designfilosofie is “atomisatie”. Elke toolklasse is alleen verantwoordelijk voor één zeer specifiek stijlstatement.mt-2 Vertaalt als: 'Het betekent alleen...' margin-top: 0.5rem，text-2xl Vertaalt als: 'Het betekent alleen...' font-size: 1.5remDoor deze atomische klassen te combineren, is het mogelijk om alle soorten complexe componenten te bouwen. Dit verbetert de ontwikkelingsefficiëntie aanzienlijk, omdat je niet meer heen en weer hoeft te schakelen tussen HTML- en CSS-bestanden, en je geen moeite meer hebt met het bepalen van de namen van de klassen. Bovendien zorgt het beperkte ontwerpssysteem (met vooraf gedefinieerde waarden voor afstanden, kleuren en fontgrootten) voor een consistentie in het ontwerp.

Vergelijking met componentenframeworks

Ten opzicht van frameworks als Bootstrap, is het uiteindelijke CSS-bestand dat Tailwind CSS genereert meestal kleiner, omdat het alleen de stijlen bevat die je daadwerkelijk gebruikt. Dit komt doordat Tailwind CSS beschikt over de krachtige PurgeCSS-functie (in Tailwind CSS versie 2 en later genoemd “Purge”). Tijdens het bouwen van de productieversie scannt Tailwind automatisch je projectbestanden, identificeert alle gebruikte toolklassen en verwijdert alle ongebruikte klassen. Hierdoor wordt een zeer geoptimaliseerd en geminimaliseerd CSS-bestand gecreëerd, waardoor het probleem van de grote omvang van CSS-bestanden dat bij traditionele CSS-framesets optreedt wordt verholpen.

Aanbevolen leesmateriaal Tailwind CSS: van het begin tot de volle beheersing van responsive webpagina's。

Hoe je Tailwind CSS gaat gebruiken

Het is heel eenvoudig om met Tailwind CSS te gaan werken. De officiële aanbeveling is om dit te doen met hun command-line-hulpmiddel. tailwindcss Installeer en configureer het. Hieronder vindt u de meest voorkomende stappen voor het installeren, in overeenstemming met moderne front-end-buildingtools.

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 →

Installeer via npm of yarn.

Eerst moet je Tailwind CSS installeren als ontwikkelingsafhankelijkheid met npm of yarn. Meestal heb je ook PostCSS en Autoprefixer nodig om CSS-tegels te converteren en browser-prefixen aan te brengen. Je kunt de volgende commando's gebruiken voor de installatie:

npm install -D tailwindcss postcss autoprefixer
# 或
yarn add -D tailwindcss postcss autoprefixer

Na de installatie moet u de initialisatie-opdracht uitvoeren om twee belangrijke configuratiebestanden te genereren:tailwind.config.js 和 postcss.config.js。

npx tailwindcss init -p

Het instellen van de configuratiebestand van Tailwind

tailwind.config.js Dit is het kernconfiguratiebestand van Tailwind. Hier kun je het designsysteem aanpassen, bijvoorbeeld door de themakleuren, fonten, ruimteproporties en andere instellingen te bepalen.

// tailwind.config.js 示例
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"], // 配置 Purge 扫描的路径
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
    },
  },
  plugins: [],
}

In CSS Tailwind introduceren

In je hoofdCSS-bestand (meestal...) src/index.css 或 src/styles.cssIn…) wordt dit gedaan door… @tailwind De instructie introduceert de kernlaag van Tailwind.

Aanbevolen leesmateriaal Tailwind CSS: Het ultimatieve handboek: Een praktische handleiding van nul tot expertniveau。

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

Ten slotte moet je deze CSS-bestand toevoegen aan je project en de toolklassen gaan gebruiken in je HTML- of JSX-code. Voer daarna de bouwcommando's uit (bijvoorbeeld…) npm run buildNadat deze instructies zijn ingevoerd, verwerkt Tailwind ze en genereert het uiteindelijke stijlbestand.

Core functies en praktische tips

Het beheersen van de kernfuncties en praktische trucken van Tailwind CSS is essentieel voor het verbeteren van de ontwikkelingsefficiëntie. Hier zijn enkele van de belangrijkste eigenschappen en geavanceerde toepassingen.

Responsief ontwerp

Tailwind gebruikt een mobiele-first responsieve strategie. De toolklassen zijn standaard van toepassing op alle schermgrootten. Om stijlen toe te passen op specifieke schermgrootten, hoef je alleen een prefix voor de betreffende schermgrootte voor de toolklasse te plaatsen. md:text-center、lg:flexDe framework bevat dit al ingebouwd. sm、md、lg、xl、2xl Er zijn vijf pauzes of stoppunten waar je kunt stoppen. tailwind.config.js 的 theme.screens Deze tekst is al deels gewijzigd.

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.

<!-- 在移动端纵向排列，在中等屏幕及以上横向排列 -->
<div class="flex flex-col md:flex-row">
  <div class="p-4">Artikel 1</div>
  <div class="p-4">Artikel 2</div>
</div>

Hover- en focustoestanden

Met prefixen is het gemakkelijk om stijlen toe te voegen aan elementen in verschillende toestanden, zoals wanneer ze worden overgehaald met de muis, wanneer ze de focus krijgen of wanneer ze zijn actief.

<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 text-white py-2 px-4 rounded">
  点击我
</button>

Componenten extraheren en gebruiken met @apply

Hoewel het handig is om toolklassen rechtstreeks in HTML te gebruiken, kan de code onnodig lang worden wanneer een complexe combinatie van stijlen meerdere keren wordt gebruikt. In dergelijke gevallen kan het handig zijn om… @apply In de CSS instructies worden de toolklassen extraheren en omgevormd in nieuwe componentklassen.

/* 在 CSS 文件中 */
.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;
}

<!-- 在 HTML 中 -->
<button class="btn-primary">按钮</button>

Maatgeschikte instellingen en plugins

De grote mate van personalisatie bij Tailwind is een van zijn sterke punten. Je kunt… tailwind.config.js Je kunt het standaardthema uitbreiden of overschrijven. Denk hierbij aan het toevoegen van aangepaste kleuren, afstandswaarden, of het instellen van derde-partijenplugins of zelfgemaakte plugins om nieuwe functies te toevoegen.

Aanbevolen leesmateriaal Het ultimatieve gids voor Tailwind CSS: van het begin tot de volle beheersing van het praktische en atomaire CSS-framework。

Toepassing in mainstream frameworks

Tailwind CSS kan naadloos worden geïntegreerd in bijna alle moderne front-end frameworks en bibliotheken, zoals React, Vue, Angular en andere.

In React-projecten wordt dit gebruikt.

In React hoef je alleen maar de hierboven beschreven stappen voor installatie en configuratie te volgen om Tailwind te integreren in je build-proces (bijvoorbeeld Create React App, Next.js of Vite). Daarna kun je de klassennamen van Tailwind rechtstreeks in je JSX gebruiken.

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.

// React 组件示例
function Card({ title, content }) {
  return (
    <div classname="max-w-sm rounded overflow-hidden shadow-lg bg-white p-6">
      <h2 classname="font-bold text-xl mb-2">\n{title}</h2>
      <p classname="text-gray-700 text-base">\n{content}</p>
    </div>
  );
}

In een Vue.js-project gebruiken

In een Vue.js-project is het integreren eveneens eenvoudig. Als je Vue CLI gebruikt, kun je de configuratie automatisch afhandelen met de bijhorende plugins van Vue CLI. Dit is vooral handig voor single-file components (.vue). <template> Deel ervan, gebruiken. class Toolklasse voor het toevoegen van attributen.

<template>
  <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
    {{ buttonText }}
  </button>
</template>

Toepassing in een Next.js-project

De officiële documentatie van Next.js biedt uitgebreide richtlijnen voor het integreren van Tailwind CSS. Omdat Next.js zelf ondersteuning voor PostCSS biedt, is de integratie erg eenvoudig. Je hoeft alleen Tailwind en de vereiste afhankelijkheden te installeren, een configuratiebestand te maken en deze configuratie vervolgens in het globale stijlbestand van Next.js in te voegen. @tailwind Een instructie is voldoende.

Samenvatting

Tailwind CSS heeft de manier waarop ontwikkelaars CSS schrijven volledig veranderd, dankzij zijn unieke benadering van “functiegericht ontwerp” en de gebruik van atomische klassennamen. Het bevrijdt de stijlregels uit traditionele styleheets en integreert ze rechtstreeks in HTML-markeringen, waardoor de efficiëntie en flexibiliteit van UI-ontwikkeling aanzienlijk verbeteren. De krachtige ondersteuning voor responsief ontwerp, de mogelijkheid om verschillende staatsopties in te stellen, de zeer persoonlijke configuratieopties en de uitstekende optimalisatie voor de productie (Purge) maken Tailwind CSS tot de ideale keuze voor zowel persoonlijke projecten als grote bedrijfsapplicaties. Hoewel het aanvankelijk kan vereisen dat je enkele klassennamen onthoudt, zijn de langtermijnvoordelen – zoals een snellere ontwikkelingsgang, een kleiner CSS-bestand en een betere consistentie in het ontwerp – onvergelijkbaar. Of je nu een beginner in front-end development bent of een ervaren ontwikkelaar: het beheersen van Tailwind CSS is een zeer waardevolle toevoeging aan je vaardigheden.

Veelgestelde vragen (FAQ)

Tailwind CSS generereert veel klassennamen, maar zal dit de prestaties van de pagina beïnvloeden?

Nee. Daar zit juist de kracht van Tailwind CSS. Hoewel de HTML-bestanden tijdens het ontwikkelingsproces veel klassennamen bevatten, heeft dit geen negatieve invloed op de prestaties tijdens het uitvoeren van het programma. De browserrenderingsengine verwerkt klassennamen zeer snel. Wat nog belangrijker is: tijdens de productie fase worden alle ongebruikte CSS-regels verwijderd met behulp van de Purge-functie. Het resultaat is een CSS-bestand dat over het algemeen kleiner is dan CSS-bestanden gemaakt met andere methoden (zoals BEM) of traditionele UI-frames (zoals Bootstrap), waardoor de laadprestaties verbeterd zijn.

Hoe voeg je eigen kleuren of ruimtes toe aan Tailwind?

Je moet de bestanden in de rootmap van het project aanpassen. tailwind.config.js Configuratiebestand. theme.extend Voeg je eigen waarden toe onder het object, zodat de standaardwaarden van Tailwind behouden blijven en je deze kunt uitbreiden.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-gray': '#f0f0f0',
        'brand-primary': '#ff6b35',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '128': '32rem',
      }
    },
  }
}

Zijn de klassennamen in Tailwind erg lang? Kan dit de leesbaarheid van het codebedrijf verminderen?

Dat hangt af van de individuele gewoonten en de manier van projectorganisatie. Voor eenvoudige componenten is het heel intuïtief om de klassennamen rechtstreeks in het HTML te combineren. Voor complexe, herbruikbare componenten wordt het sterk aanbevolen om… @apply De instructie bevat een bevel om toolklassen uit te halen uit het CSS en ze te verpakken in semantische componentklassen. .btn-primaryDaarnaast kan de leesbaarheid en onderhoudbaarheid van JSX/HTML-code worden verbeterd door de code op te delen in functionele gebieden, door gebruik te maken van meervoudige regelformaten voor classnamen en door toevoeging van duidelijke commentaren.

Is het mogelijk om Tailwind CSS te introduceren in een bestaand project dat al gebruikmaakt van traditioneel CSS?

Ja, dat is mogelijk, maar je moet het zorgvuldig plannen. Tailwind CSS kan naast andere CSS-frames of aangepaste CSS-bestanden worden gebruikt. Het is verstandig om een geleidelijke migratiestrategie te hanteren: begin eerst met het toepassen van Tailwind op nieuw ontwikkelde pagina’s of componenten, en gebruik PostCSS om alle CSS-bestanden te bewerken. Let op dat je conflicten in de stijlen voorkomt; daarom moet je ervoor zorgen dat de basisstijlen van Tailwind niet worden overschreven door andere stijlregels.@tailwind baseDe bestaande stijl wordt hierdoor niet verstoord; soms is het echter nodig om bepaalde basisstijlen uit te schakelen door ze te configureren. Het beste is om met een onafhankelijke, niet-kritieke pagina te beginnen en ervaring op te doen door dit steeds verder te ontwikkelen.