Úvodní příručka k Tailwind CSS: Vytváření moderních, responzivních webových stránek od nuly

Co je Tailwind CSS?

Tailwind CSS je CSS framework, který klade důraz na funkčnost. Pomáhá vývojářům rychle vytvářet vlastní uživatelské rozhraní díky velkému množství kombinovatelných, praktických tříd (Utility Classes). Na rozdíl od frameworků, jako je Bootstrap, které poskytují předdefinované komponenty (např. tlačítka, karty), Tailwind CSS neobsahuje žádné komponenty s pevně daným vzhledem. Místo toho nabízí sadu malých, jednoúčelových tříd. text-center、bg-blue-500、p-4 Atd.

开发者通过直接在 HTML 的 class 属性中组合这些类来构建任何设计。这种方法消除了在 CSS 文件和 HTML 文件之间频繁切换的需要，将样式直接写在标记语言中，从而极大地提高了开发速度。同时，它通过约束设计 token（如颜色、间距、字体大小），强制执行了设计系统的一致性。

Jeho hlavní výhodou je vysoká přizpůsobivost a extrémní flexibilita. To je možné díky konfiguračním souborům. tailwind.config.jsMůžete snadno definovat svůj vlastní designový systém, včetně barevné palety, poměrů mezer a dalších parametrů. Vytvořený CSS bude obsahovat pouze ty třídy, které skutečně používáte, a výsledný produktový soubor bude velmi kompaktní (má malou velikost).

Doporučujeme k přečtení. Kompletní průvodce tvorbou webových stránek: od nuly až po spuštění – realizace moderního a efektivního procesu tvorby webových stránek.。

Jak začít s instalací a konfigurací?

Chcete-li začít používat Tailwind CSS, nejprve je nutné ho integrovat do svého projektu. Doporučený způsob je instalace pomocí Node.js a npm (nebo yarn).

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 →

Nainstalujte základní balíčky pomocí npm.

Nejprve inicializujte projekt pomocí nástroje npm (pokud již nebyl inicializován) a poté nainstalujte Tailwind CSS spolu se svými závislostmi. Spusťte následující příkazy v kořenovém adresáři vašeho projektu:

npm install -D tailwindcss postcss autoprefixer

Tento příkaz nainstaluje samotný Tailwind CSS, PostCSS (nástroj používaný k přetváření CSS kódů) a Autoprefixer (nástroj, který automaticky přidává předpony specifické pro jednotlivé prohlížeče).

Vytvořit konfigurační soubor

Následně vytvořte výchozí konfigurační soubory pro Tailwind CSS a PostCSS:

npx tailwindcss init -p

Tento příkaz vytvoří dvě soubory:tailwind.config.js 和 postcss.config.jsMezi nimi tailwind.config.js Je to hlavní místo, kde jste si vlastními silami navrhli a vytvořili systém.

Doporučujeme k přečtení. Návod na tvorbu webových stránek: kompletní proces a klíčové technologie pro vytvoření vysoce výkonných webových stránek od nuly.。

Nastavte cestu k šabloně.

Aby mohl Tailwind inteligentně odstranit nepoužívané styly (tj. proces zvaný „Tree Shaking“), je potřeba… tailwind.config.js Uveďte zde všechny cesty k zdrojovým souborům, které obsahují názvy tříd od Tailwind CSS. Najděte je. content Vyberte požadovaná pole a provádějte jejich konfiguraci:

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

Zavedení základních stylů

Na závěr, ve vašem hlavním CSS souboru (například…) src/input.css 或 styles/globals.cssV tomto případě se používá @tailwind Příkaz by měl obsahovat jednotlivé vrstvy (layers) Tailwind CSS:

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Poté, ve vašem build procesu (například pomocí Vite, Webpack nebo přímo prostřednictvím CLI), zpracujete tento CSS soubor za účelem vytvoření finálního stylového souboru.

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.

Klíčové koncepty a praktické třídy

K pochopení jádra Tailwind CSS je důležité ovládnout pravidla pojmenovávání užitečných tříd a metody responsivního designu.

Pravidla pro pojmenovávání užitečných nástrojů a funkcí

Názvy užitečných tříd v Tailwindu dodržují intuitivní vzor:{属性}{方向}-{尺寸}Například:
* mt-4：margin-top: 1rem; V Tailwindu odpovídá 1 jednotka obvykle hodnotě 0,25rem, takže 4 znamená 1rem.
* px-6：padding-left: 1.5rem; 和 padding-right: 1.5rem;。
* bg-gray-100：background-color: #f3f4f6;。
* text-xl：font-size: 1.25rem; line-height: 1.75rem;。
* rounded-lg：border-radius: 0.5rem;。

Tento způsob pojmenovávání činí záměry týkající se stylizace při psaní HTML kódu velmi jasnými, bez potřeby vzpomínat si na názvy vlastních CSS tříd.

Doporučujeme k přečtení. Průvodce celým procesem vytváření moderních webových stránek: technické postupy a strategické analýzy od nuly až po spuštění.。

Reaktivní design a předpony pro určení bodů přerušení (breakpoints)

Tailwind používá systém přerušení („breakpoints“) zaměřený především na mobilní zařízení. Výchozí užitečné třídy jsou vhodné pro všechny velikosti obrazovek (včetně mobilních). Chcete-li aplikovat styly pro větší obrazovky, je nutné před názvem třídy přidat příslušný předponový znak určující velikost obrazovky.
Výchozí přerušení (breakpoints) zahrnují:
* sm: (640px)
* md: (768px)
* lg: (1024px)
* xl: (1280 pixelů)
* 2xl: (1536 pixelů)

Například,<div class="text-center md:text-left"> Znamená, že text bude zarovnán na levou stranu na obrazovkách o velikosti střední a větší, zatímco na obrazovkách menších velikostí bude zarovnán uprostřed.

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.

Stavové varianty a pseudoklasy

Tailwind nabízí bohatou škálu předpon pro zpracování různých stavů prvků, jako je nadmířené zvýraznění („hover“), zaměření pozornosti („focus“), aktivace atd. Tyto předpony jsou spojeny s užitečnými třídami pomocí dvojtečky.
Mezi běžně používané předpony variant patří:
* hover: (:hover)
* focus: (:focus)
* active: (:active)
* disabled: (:disabled)

Například,<button class="bg-blue-500 hover:bg-blue-700"> Bude vytvořeno tlačítko ve výchozí modré barvě, které se při přejetí myší změní na tmavě modrou barvu. Můžete to nastavit v konfiguračním souboru. theme.extend Část těchto variant lze přizpůsobit podle vlastních požadavků.

Vytvořte reaktivní komponentu typu „karta“ (card component).

Teď přeneseme výše uvedené znalosti do praxe a vytvoříme moderní, responsivní kartičkový komponent. Tato kartička bude obsahovat obrázek, nadpis, popis a tlačítko a bude schopna pohodlně přizpůsobovat své uspořádání různým velikostem obrazovek.

Základní HTML struktura pro vytvoření karty:

Začneme s nejzákladnějšími kontejnery a jejich obsahem. Vytvoříme jeden… .html Soubor a vytvořte následující strukturu:

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Obrázek na kartě">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Titulek karty v Tailwind CSS</div>
    <p class="text-gray-700 text-base">
      Toto je popis této karty, který uvádí její hlavní obsah nebo vlastnosti. Takový design lze rychle vytvořit pomocí technologie Tailwind CSS.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Zjistěte více
    </button>
  </div>
</div>

V této chvíli již máte kartu se základním vzhledem: bílý pozadí, zaoblené rohy, stín, obrázek a tlačítko.

Přidání nastavení reaktivního uspořádání (responsive layout adjustment)

Chceme, aby se karty na mobilních zařízeních vertikálně skládaly, zatímco na středně velkých obrazovkách (např. tabletech) a větších mohly zobrazovat vedle sebe. To můžeme dosáhnout pomocí technologií Flexbox a responsivního designu. Kontejner pro karty umístíme dovnitř Flex kontejneru.

<div class="container mx-auto p-4">
  <div class="flex flex-col md:flex-row gap-6"> <!-- 响应式 Flex 方向 -->
    <!-- 卡片 1 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Obrázek na kartě">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">Titulek k kartě 1</div>
        <p class="text-gray-700 text-base mb-4">
          Popis obsahu karty jedna.
        </p>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          Operace č. 1
        </button>
      </div>
    </div>
    <!-- 卡片 2 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/401/300" alt="Obrázek na kartě">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">Název druhé karty</div>
        <p class="text-gray-700 text-base mb-4">
          Popis obsahu karty č. 2.
        </p>
        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          Operace č. 2
        </button>
      </div>
    </div>
  </div>
</div>

Klíčové body:
1. flex flex-col md:flex-rowVnější kontejnery jsou ve výchozím nastavení uspořádány vertikálně.flex-colNa středně velkých obrazovkách se prvky zařadí do horizontálního uspořádání.md:flex-row）。
2. gap-6Přidání mezery mezi prvky v flexovém uspořádání.
3. flex-1Ujistěte se, že při horizontálním rozložení dvou karet jsou rozděleny prostor rovnoměrně.
4. w-full md:w-autoTlačítko na mobilních zařízeních zabírá celou šířku obrazovky a na zařízeních s většími obrazovkami se vrátí ke své automatické šířce.

Vlastní styly pro efekty při přejetí myší („hover“) a při zvýraznění obsahu („focus“)

Aby interakce byla ještě jemnější, můžeme přidat efekt „přejetí myší“ (hover effect) samotnému kontejneru kartiček a také vylepšit vzhled tlačítek při zvýšené pozornosti uživatele (focus style).

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1 transition duration-300 ease-in-out hover:shadow-2xl hover:-translate-y-1">
  ...
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out w-full md:w-auto">
    Zjistěte více
  </button>
  ...
</div>

Zde jsme přidali:
* transition duration-300 ease-in-outPřidejte plynulé přechody pro všechny změny vlastností karty.
* hover:shadow-2xl hover:-translate-y-1Při přejetí myší přes tuto část obsahu se stín zvětší a mírně posune směrem nahoru, čímž vznikne efekt “vzdušnosti” (tj. pocit, že daná část obsahu „plave“ nad okolím).
* focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50Odstraňte výchozí kontury pozornosti v prohlížeči a nahraďte je vlastní modrou aureolou, která lépe odpovídá designu.

Závěr

Tailwind CSS zásadně změnil způsob, jakým front-end vývojáři vytvářejí styly, díky své metodologii praktických tříd, které klade důraz na funkčnost. Eliminuje ztráty kontextu při přecházení mezi soubory a přímě spojuje designová rozhodnutí s kódem v HTML, čímž umožňuje dosažení úžasné výkonnosti při vývoji. Celý proces – od instalace a konfigurace přes pochopení intuitivních pravidel pojmenovávání až po vytváření složitých komponent pomocí responsivních prvků a variant stavů – vyjadřuje svobodu v rámci určitých omezení.

Prostřednictvím vytvoření responzivního komponentu typu „karta“ jsme si ukázali, jak kombinovat detailní, praktické třídy do kompletního designu a snadno implementovat interaktivní prvky a přizpůsobení pro různá zařízení. I když se na začátku může zdát, že názvy tříd jsou příliš dlouhé, po zvyknutí na tento vzor se rychlost vývoje výrazně zvýší. Tailwind CSS není pouze CSS frameworkem, ale také silným, přizpůsobitelným nástrojem pro design, vhodným pro různé scénáře – od návrhu prototypů až po velké produkční projekty.

Časté dotazy

Budou soubory CSS vytvořené pomocí Tailwind CSS příliš velké?

Ne. Právě to je jednou z hlavních výhod Tailwind CSS. Při výrobě a kompilaci kódu spouští Tailwind proces “Purge” (ve verzi 3.0 a novějších nazývaný analýzou “Content”). Tento proces prohledá všechny šablony, které jste specifikovali v konfiguračním souboru (např. HTML, JSX, Vue), identifikuje všechny použité užitečné třídy a poté do finálního CSS souboru přidá pouze tyto třídy.

Nevyužité styly budou úplně odstraněny, takže výsledný soubor CSS má obvykle velikost pouze několika KB až několika desítek KB, což je mnohem méně než u mnoha ručně psaných souborů CSS nebo souborů CSS vytvořených pomocí tradičních knihoven komponent. Toho lze dosáhnout pomocí přesné konfigurace. content Cesta zajišťuje, že analýzový proces probíhá správně a bez chyb.

Pokud budou názvy užitkových tříd tak dlouhé, nebude HTML obtížné číst?

这是一个常见的初次印象。确实，HTML 中的 class 属性会变得很长。然而，许多开发者认为这是一种权衡，并且带来了几个好处：首先，你无需为类名起名而苦恼（如 card-container-inner-wrapperNení třeba přecházet mezi soubory CSS a HTML za účelem hledání definic stylů – všechny styly jsou jasně uvedeny přímo na elementech.

Zadruhé, co se týká týmové spolupráce, poskytuje jednotný designový jazyk, díky kterému i nováčci rychle pochopí záměr stylizace. Pro zvýšení čitelnosti můžete použít… @apply Příkazy umožňují extrahovat běžně používané praktické třídy do CSS jako vlastní komponentní třídy, nebo využívat doplňky editoru (např. Tailwind CSS IntelliSense) pro automatické doplňování textu a výrazové zvýraznění, což výrazně zlepšuje zážitek při psaní kódu.

S jakými frontendovými frameworky lze Tailwind CSS používat?

Tailwind CSS se dokonale integruje s téměř všemi moderními front-end frameworky a knihovnami. V podstatě pouze generuje CSS kódy a nepoužívá žádný konkrétní JavaScript runtime.

V rámci frameworků jako React, Vue, Angular a Svelte můžete používat názvy tříd z balíčku Tailwind stejným způsobem, jako v běžném HTML. Komunita také poskytuje oficiální nebo třetí stranové doplňky a nástroje určené právě pro tyto frameworky. @headlessui/reactVytvořeno oficiálně společností Tailwind a poskytuje interaktivní komponenty bez předdefinovaného vzhledu, které se bezproblémově integrují se styly napsanými pomocí Tailwind. Stačí zajistit, aby váš sestavovací proces (např. Vite, Webpack) byl správně nakonfigurován pro použití PostCSS a Tailwind.

Jak si přizpůsobit barvy a rozestupy tematického vzhledu (tj. vzhledu stránek podle zvoleného tématu)?

Všechny úpravy a personalizace jsou hotové. tailwind.config.js Dokumenty jsou theme Část procesu probíhá pomocí dvou strategií: “rozšíření” (extend) a “přepsání” (override) v rámci frameworku Tailwind. Pokud chcete přidat nové hodnoty bez ztráty výchozích nastavení, měli byste použít metody určené k rozšíření funkcionalit frameworku. extend。

Například, pokud chcete přidat barvu značky a zvětšit poměr mezer:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Po konfiguraci ji můžete okamžitě používat. bg-brand 和 p-128 Taková třída. Pokud chcete zcela nahradit výchozí paletu barev nebo měřítko rozestupů, jednoduše umístěte nové definice na odpovídající místo. theme Dole, a ne… extend Tailwind’s konfigurační systém je velmi flexibilní a umožňuje vám vytvořit si vlastní designový systém.