Úvod do Tailwind CSS a praktické využití: Vytváření moderních, responzivních webových rozhraní od nuly

Co je to Tailwind CSS?

Při tradičním vývoji pomocí CSS jsme zvyklí definovat pro prveky stránek semantická třídní jména a poté v samostatných souborech sešitů stylů psát konkrétní pravidla stylů. Tento přístup často vede k častému přepínání mezi soubory HTML a CSS, a jak projekt roste, se soubory sešitů stylů stávají přetíženými a obtížně udržovatelnými.Tailwind CSS Byl tedy zvolen zcela odlišný přístup založený na principu “prioritety funkcí” při vývoji atomizovaného CSS frameworku. Tento framework poskytuje rozsáhlou sadu detailních, znovupoužitelných nástrojových tříd, které vývojáři mohou přímo v HTML nebo JSX kombinovat za účelem vytvoření jakéhokoli požadovaného designu.

Jeho hlavní výhodou je, že odstranil závislost na vlastním CSS kódu. Už nemusíte přemýšlet nad názvy tříd pro tlačítka, karty nebo navigační lišty, ani se obávat konfliktů mezi styly. Například, abyste vytvořili tlačítko s zaoblenými rohy, modrým pozadím, bílým textem a vnitřním odstupem, stačí napsat:<button class=“rounded bg-blue-500 text-white p-4”>按钮</button>Tento způsob vývoje výrazně zvyšuje rychlost a konzistenci při vytváření uživatelského rozhraní. Díky nástrojům, jako je PurgeCSS (vestavěný v Tailwindu verze 3 a novějších jako optimalizační nástroj), lze automaticky odstranit nepoužité styly, čímž výsledný CSS soubor zůstává velmi kompaktní.

Jak začít používat Tailwind CSS?

Začněte používat Tailwind CSS Existuje několik způsobů, nejčastější je však použití oficiálního nástroje CLI nebo integrace s nástroji na vývoj front-end stránek.

Doporučujeme k přečtení. Úvodní příručka k Tailwind CSS: Vytváření moderních, responzivních rozhraní od nuly。

Rychlá instalace pomocí npm a CLI

Nejlepším způsobem je instalovat Tailwind pomocí nástroje npm a následně použít jeho příkazový řádek k inicializaci projektu. Nejprve spusťte v terminálu v kořenovém adresáři svého projektu následující příkazy, abyste nainstalovali Tailwind a jeho závislosti:

Nástroj pro tvorbu webových stránek WordPress.com.

Dostupnost 99,9991 TP4T + přeshraniční zotavení po havárii, podpora 24 hodin denně, bezplatné používání AI pro tvorbu webových stránek při zakoupení balíčku blogů.

Název domény zdarma na jeden rok

Přejděte na web WordPress.com a využijte asistenta pro tvorbu webových stránek →

Nástroj pro tvorbu webových stránek UltaHost.

Více než 900 bezplatných, přizpůsobitelných šablon, které poskytují SEO schopnosti potřebné k optimalizaci viditelnosti webových stránek ve vyhledávání.

Nabídka 40%

Navštivte webovou stránku UltaHost pro pomoc při tvorbě webu →

npm install -D tailwindcss
npx tailwindcss init

První příkaz bude… tailwindcss Nainstalujte to jako vývojovou závislost. Druhý příkaz vytvoří výchozí konfigurační soubor. tailwind.config.jsTento soubor je klíčový pro vytvoření vašeho vlastního tématu pro Tailwind CSS, přidání pluginů a nastavení cest pro provádění procesu „Purge“.

Konfigurační soubor pro Tailwind CSS

Generovaný tailwind.config.js Počáteční obsah souboru je velmi jednoduchý. Aby se zajistilo, že nástroj Tailwind dokáže prozkoumat váš HTML soubor a odstranit nepoužité styly, je nutné provést některé konfigurační úpravy. content Pole. Například v typickém projektu Vue nebo React by konfigurace mohla vypadat následovně:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [“./src/**/*.{html,js,vue,jsx,tsx}”],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tato konfigurace říká Tailwindu, aby provedl skenování. src Všechny soubory v adresáři se zadaným příponou a z nich extrahování použitých nástrojových tříd.

Zavedení základních stylů do projektu

Po instalaci a konfiguraci je nutné do hlavního CSS souboru projektu začlenit jednotlivé části („layers“) frameworku Tailwind. Obvykle vytvoříte soubor s názvem… src/styles.css 或 src/index.css Soubor a přidejte následující instrukce:

Doporučujeme k přečtení. Naučte se Tailwind CSS: praktický průvodce od začátku až po pokročilé techniky.。

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

@tailwind base Zavedené jsou základní styly z balíčku Tailwind, které slouží k resetování výchozích nastavení a poskytování jednotného vzhledového standardu.@tailwind components Zainstalované jsou komponenty obsažené v balíčku Tailwind (např. kontejnery) a také ty, které jste si sami přidali. @apply Třída komponenty, pro kterou byla registrována instrukce.@tailwind utilities Takže byly vloženy všechny funkční třídy – to je ten nejzákladnější část.

Na závěr se ujistěte, že váš build proces (např. pomocí Vite nebo Webpack) dokáže zpracovat tento CSS soubor, nebo že existují příslušné CLI příkazy pro správu tohoto procesu. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Pro reálnou kompilaci.

Podrobný výklad základních funkčních tříd v Tailwind CSS

Tailwind CSS Tato třída nástrojů pokrývá všechny CSS vlastnosti týkající se rozvrhu, mezer, sazby, barev, okrajů a efektů. Pravidla pojmenovávání jsou velmi intuitivní a obvykle se řídí určitými konvencemi. 属性{方向？}-{尺寸} Režim „“.

Nástroj pro tvorbu webových stránek Bluehost

Nabízí nástroje pro tvorbu webových stránek s umělou inteligencí, online chat a telefonickou podporu 24 hodin denně, 7 dní v týdnu, bezplatnou doménu na rok, bezplatnou CDN a dohodu o úrovni služeb (SLA) s dobou provozu na 99,991 %

Navštivte Bluehost.

Řízení mezery a rozměrů

Tailwind používá jednotný systém numerických poměrů k řízení vnitřních a vnějších okrajů (marginů), šířek a výšek. Například…p-4 Zobrazit padding: 1rem(Výchozí hodnota: 1 jednotka = 0,25rem)m-2 Zobrazit margin: 0.5remMůžete použít… px-、py-、pt-、pr- Předpony se používají k určení konkrétního směru. U rozměrů…w-64 Zobrazit width: 16rem，h-screen Zobrazit height: 100vhTato konzistence činí rozestupy mezi prvky rozhraní a jejich zarovnání velmi jednoduchým a uspořádaným.

Barvy a styly pozadí

Tailwind nabízí pečlivě navrženou paletu barev, přičemž každá barva má různou intenzitu (od 50 do 900). To je možné dosáhnout pomocí třídních jmen, jako např.… text-blue-600(Barva textu),bg-gray-100(Pozadová barva),border-red-300(Barevnost rámečku) lze aplikovat přímo. Také můžete snadno nastavit gradientový pozadí, například… bg-gradient-to-r from-cyan-500 to-blue-500 Zobrazuje lineární gradient od modré barvy na levé straně po modrou barvu na pravé straně.

Reaktivní design a interaktivní stav

Responzivní design v Tailwindu se řídí principem “mobile first” – každá funkční třída je výchozě navržena pro mobilní zařízení. Chcete-li aplikovat styly na větší rozlišení obrazovky, je nutné přidat odpovídající responzivní předponu. Například:text-center md:text-left lg:text-2xl Znamená to zarovnat text uprostřed na mobilních zařízeních a na středně velkých obrazovkách.md:Zařízení s velkým displejem by měla být text zarovnán vlevo (left-aligned) pro velikost textu 14 písmen a větší.lg:Pro velikosti textu 18 bodů a větší nastavte velikost písma na… 1.5rem。

Doporučujeme k přečtení. Ovládnutí Tailwind CSS: Průvodce základními koncepty a praktickými technikami pro začátečníky a pokročilé。

Zpracování interakčního stavu je stejně jednoduché. Můžete použít předpony, jako např. hover:、focus:、active: Přidejte styly pro různé stavy. Například…<button class=“bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 …”> Lze snadno dosáhnout efektů přejetí myší přes text („hover“) a zaměření pozornosti na konkrétní část obsahu („focus“), aniž by bylo nutné psát žádný vlastní kód CSS.

Praktický příklad: Vytvoření komponenty typu „karta“ pomocí Tailwind CSS

Provedeme to tak, že vytvoříme komponentu kartičky v moderním stylu, která bude kombinovat všechny uvedené prvky. Tato kartička bude obsahovat obrázek, nadpis, popisový text, tagy a tlačítko pro provedení nějaké akce, a navíc bude reaktivní (bude se přizpůsobovat různým velikostem obrazovky).

hosting.com

Bezplatný SSL, Cloudflare CDN, WAF, více než 40 datových center po celém světě, nižší latence v blízkosti, podpora služeb 24/7/365, nyní můžete ušetřit až 671 TB dat a podpora konfigurace AI a optimalizace SEO.

Navštivte hosting.com.

Nejprve vytvoříme základní strukturní rámec HTML karty a použijeme základní třídy pro úpravu layoutu a obsahu:

<div class="“max-w-sm" rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <!-- 图片区域 -->
  <img class="“w-full" h-48 object-cover” src="“https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600”" alt="“Technologické výrobky”">
  <!-- 内容区域 -->
  <div class="“px-6" py-4”>
    <div class="“font-bold" text-xl mb-2 text-gray-800”>Praktický průvodce použitím Tailwind CSS</div>
    <p class="“text-gray-600" text-base”>
      Naučte se rychle vytvářet estetické, konzistentní a vysokokvalitní moderní uživatelské rozhraní pomocí atomizovaných nástrojových sad. Nemusíte přepínat mezi různými soubory – soustřeďte se pouze na samotný design.
    </p>
  </div>
  <!-- 标签区域 -->
  <div class="“px-6" pt-2 pb-4”>
    <span class="“inline-block" bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”>#CSS framework</span>
    <span class="“inline-block" bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># Frontend Development</span>
    <span class="“inline-block" bg-purple-100 text-purple-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># – reaktivní design (responzivní design)</span>
  </div>
  <!-- 行动按钮 -->
  <div class="“px-6" pb-6”>
    <button class="“w-full" bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50”>
      Přečtěte si to hned.
    </button>
  </div>
</div>

Analýza struktury a stylu karet

V této kartě jsme použili velké množství nástrojových tříd. Nejvnější kontejner byl vybrán… max-w-sm Chceme omezit maximální šířku.rounded-xl Implementování velkých zakřivených rohůshadow-lg Byla přidána tmavší stínování pro vytvoření pocitu trojrozměrnosti.bg-white Nastavte bílý pozadí.mx-auto Umožnit horizontální zarovnání.

Oblast obrázku je připravena k použití. h-48 Výška byla nastavena a bylo použito… object-cover Ujistěte se, že obrázek je správně oříznut a zaplní celou plochu. Margíny v obsahové oblasti jsou nastaveny tak… px-6 py-4 Ovládání. Nadpis je vytištěn tučně.font-boldVelké písmo (large font)text-xlVýškový odstup (margin top) a dolní odstup (margin bottom)mb-2）。

Štítky byly vytvořeny pomocí inline blokového formátování.inline-blockV kombinaci s barvou pozadí, barvou textu a zaoblenými hranami…rounded-full) a malý vnitřní odstup (px-3 py-1Pro dosažení efektu „kapsle“ se používá určitý designový princip. Tlačítka zase mají integrované pozadí s gradientem.bg-gradient-to-r), změny při přejezdu myši („hover effects“)hover:from-、hover:to-), přechodové animace (transition duration-300) a fokusovací kroužek (focus:ring-2včetně pokročilých efektů, jako jsou…

Učinit komponentu „karta“ responzivní

Aby se karty lépe zobrazovaly na větších obrazovkách, můžeme snadno přidat některé responsivní třídy. Například, pokud chceme, aby se karty správně přizpůsobily střednímu formátu obrazovky…md:Pokud je velikost ） a výše, karty mohou být rozloženy horizontálně – obrázek bude na levé straně a obsah na pravé. Můžeme mírně upravit vnější strukturu a třídy určené pro obrázky a obsah:

<div class="“max-w-4xl" md:flex rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <img class="“md:w-1/3" w-full h-48 md:h-auto object-cover” src="“…”" alt="“…”">
  <div class="“md:w-2/3" p-6 md:p-8”>
    <!-- 标题、描述、标签、按钮等内容 -->
  </div>
</div>

Díky přidání md:flex Učinite, aby kontejner na středně velkých obrazovkách měl flexové uspořádání (Flex Layout), a použijte k tomu odpovídající kódy. md:w-1/3 和 md:w-2/3 Ovládá poměr šířky obrázku k šířce obsahové oblasti. md:h-auto Umožněte, aby výška byla automaticky přizpůsobována obsahové oblasti. md:p-8 Tím se zvětšil interiérní odstup (padding) pod velkým displejem. Stačí pouze několik změn v kódu týkajících se tříd a je hotová responsive karta (karta, která se přizpůsobí různým velikostem obrazovky).

Závěr

Tailwind CSS Díky svému přístupu zaměřenému na funkčnost a atomizaci tříd zcela změnilo způsob, jakým píšeme CSS. Odstranilo psychologický tlak spojený s pojmenováváním stylů a výrazně zvýšilo efektivitu a konzistenci vývoje uživatelského rozhraní. Od jednoduchého řízení mezery až po složité reaktivní rozložení a interaktivní stavy lze vše rychle dosáhnout kombinací intuitivních názvů tříd. Ačkoli se na první pohled může zdát, že zapisování velkého množství názvů tříd do HTML není “elegantní”, zlepšený vývojový zážitek, snížené náklady na údržbu a výsledné vysoce výkonné soubory stylů z něj činí velmi konkurenceschopné řešení pro moderní webové projekty. Doufáme, že díky úvodnímu přehledu a praktickým cvičením v tomto článku uspěšně začnete cestu efektivního vývoje pomocí Tailwind CSS.

Časté dotazy

Jaký je rozdíl mezi Tailwind CSS a vloženými styly (inline styles)?

Tailwind CSS se zásadně liší od inline stylů. Inline styly (style=””Vlastnosti nemohou být využity k implementaci responsivního designu pomocí mediálních dotazů, ani k zpracování stavů pseudoklas. :hover 或 :focusKromě toho, vložené styly (inline styles) překryjí všechny ostatní styly a postrádají jakoukoli formu omezení.

Nástrojové třídy Tailwind ve skutečnosti představují předdefinované, „povinné“ designové prvky (design tokens), které jsou založeny na přísném designovém systému – včetně pravidel pro rozestupy mezi prvky, barevných palet a možností úpravy vzhledu stránek v různých rozlišeních (reaktivní prefixy). Toto uspořádání zajišťuje konzistenci designu v rámci celého projektu. Tailwind také plně podporuje využití reaktivních a stavových prefixů (state prefixes) a umožňuje globální přizpůsobení prostřednictvím konfigurace, což je něco, co není možné dosáhnout pomocí interních stylů (inline styles).

Co dělat, když v velkých projektech jsou názvy tříd v HTML příliš dlouhé a způsobují zmatek?

Pro opakující se styly složitých komponent doporučuje Tailwind použití… @apply Příkazy v CSS slouží k výběru tříd komponent, nebo lze přímo využít komponentové možnosti JavaScriptových frameworků (jako jsou React, Vue) k jejich zabalení.

Například můžete sadu složitých tříd týkajících se tlačítek extrahovat do jedné CSS komponentní třídy:

.btn-primary {
  @apply w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50;
}

Poté to použijte přímo v HTML. <button class=“btn-primary”>Lepší praxí je v Reactu vytvořit… <Button> Komponenty, nebo vytvoření komponenty v Vue <MyButton> Komponenty – styly by měly být ukryty uvnitř komponent, aby byly šablony jednodušší a čitelnější.

Jak optimalizovat velikost nakonec vytvořeného souboru CSS pomocí Tailwind CSS?

V režimu vývoje generuje Tailwind CSS rozsáhlý soubor stylů obsahující všechny možné nástrojové třídy, což usnadňuje rychlý vývoj. Při výstupním sestavení („production build“) však spustí velmi důležitý krok optimalizace.

Bude se to řídit podle toho, co nastavíte v konfiguračním souboru. tailwind.config.js 的 content Zadaná cesta k souboru v poli slouží k prohledání všech šablonových souborů (např. .html, .jsx, .vue), aby bylo možné přesně identifikovat názvy použitých nástrojových tříd. Následně jsou všechny nepoužité styly zcela odstraněny z finálního CSS souboru. Tento proces je vysoce optimalizovaný a obvykle umožňuje zmenšit velikost finálního CSS souboru na 10 KB nebo dokonce méně, čímž se dosahuje výborného výkonu.

Lze si přizpůsobit výchozí designový systém Tailwind?

Samozřejmě že ano – to je také jedna z silných stránek Tailwind CSS. Veškerá personalizace probíhá přímo v rámci tohoto frameworku. tailwind.config.js Provádí se v souboru.

Můžete… theme.extend Pod daným objektem můžete rozšířit výchozí tematiku – například přidat nové barvy, hodnoty mezery, velikosti písma nebo „bodů přerušení“ (breakpoints). Také můžete… theme Přímo pod daným objektem lze některé části výchozího tématu přepsat. Například můžete takto přizpůsobit hlavní barvu a značky přerušení („breakpoints“):

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1992d4’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
    screens: {
      ‘tablet’: ‘640px’,
      ‘laptop’: ‘1024px’,
      ‘desktop’: ‘1280px’,
    },
  },
}

Takto můžete tento nástroj používat ve svém projektu. bg-brand-blue、w-128 příliš tablet: Takovéto přizpůsobené třídy.