Ovládněte Tailwind CSS: Průvodce moderním CSS frameworkem od základů až po praktické příklady.

Jako CSS framework s důrazem na praktičnost…Tailwind CSS Jádrem této filozofie je “funkčnost na prvním místě”. Nezajišťuje předdefinované, sémanticky vysvětlené třídy komponent (jako např.) .btn 或 .cardMísto toho poskytuje celý soubor atomárních tříd s detailním rozdělením funkcí a jedinou úlohou. Vývojáři mohou pomocí přímé kombinace těchto tříd na HTML prvky vytvářet zcela vlastní designy, čímž dosahují úzkého propojení stylu a struktury. Zároveň je to způsob, který zachovává vysokou udržovatelnost a konzistenci kódu.

Hlavní výhody Tailwind CSS:

Velmi vysoká efektivita vývoje

Díky kombinování atomárních tříd nemusí vývojáři neustále přepínat mezi soubory HTML a CSS. Rozhodnutí týkající se designu se provádějí přímo na úrovni značek (markup), což výrazně urychluje proces vytváření prototypů a jejich iterací. Například pro vytvoření tlačítka stačí do HTML zadat název třídy; není potřeba pro něj psát samostatné CSS styly.

Konzistence designu

Vestavěný designový systém rámu (mezery, barvy, velikost písma, přerušení atd.) nutí celý projekt dodržovat jednotné měřítko. To eliminuje nejednotnost způsobenou náhodným určováním hodnot a zajišťuje jednotnost designového jazyka.

Doporučujeme k přečtení. Co je Tailwind CSS?。

Velmi malá velikost výrobního balíčku

Tailwind CSS Použití PurgeCSS(V verzích 3.0 a novějších je to nazýváno “skenováním obsahu”) Za účelem odstranění všech CSS tříd, které nejsou v projektu použity. To znamená, že výsledný soubor CSS obsahuje pouze styly, které skutečně potřebujete, a obvykle má velikost jen několika KB. Díky tomu je dosaženo maximálního vylepšení výkonu.

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 →

Plná možnost personalizace

Ačkoli jsou k dispozici designové tokeny, které lze okamžitě použít po rozbalení, můžete je také upravit podle svých požadavků. tailwind.config.js Konfigurační soubory umožňují kompletní přizpůsobení tématu. Můžete definovat vlastní barvy, mezery, písma a dokonce vytvářet vlastní užitečné třídy.

Rychlý start a základní nastavení

Instalace a inicializace

Nejčastějším způsobem instalace je použití nástrojů npm nebo yarn. Po spuštění příkazu instalace v kořenovém adresáři projektu bude vytvořen výchozí konfigurační soubor. tailwind.config.js A souborem s základními styly.

npm install -D tailwindcss
npx tailwindcss init

Path k konfiguračnímu obsahu

Inicializovaný a generovaný tailwind.config.js Soubory jsou klíčové. Musíte je správně nakonfigurovat. content Pole, které slouží k informování… Tailwind Které soubory je třeba skenovat, abychom našli názvy použitých tříd? Obvykle jde o vaše šablony nebo soubory s komponentami.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Zavedení základních stylů

Ve vašem hlavním CSS souboru (např.…) src/styles.cssV tomto případě se používá @tailwind Příkaz slouží k načtení základních stylů frameworku.

Doporučujeme k přečtení. Praktická příručka: Jak rychle vytvořit moderní responzivní webové stránky pomocí Tailwind CSS.。

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

Následně je potřeba pomocí nástrojů na vývoj (jako jsou Vite nebo Webpack) nebo prostřednictvím příkazů z příkazového řádku (CLI) zpracovat tento CSS soubor a převést ho na čistý CSS kód.

Jádro praktických tříd a responzivní design.

Použití paradigmat pro třídy typu „Atom“

Tailwind CSS Názvy těchto tříd jsou velmi čitelné a dodržují vzor “vlastnost-hodnota” nebo “vlastnost-přerušení-hodnota”. Například:p-4 Zobrazit padding: 1rem；bg-blue-500 Znamená to, že barva pozadí je číslo 500 z palety modrých odstínů.text-center Znamená, že text bude zobrazen uprostřed obrazovky.

<button class="px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
  点击我
</button>

Reaktivní systém na nastavování bodů přerušení (breakpoints)

Framework obsahuje pět výchozích breakpointů:sm, md, lg, xl, 2xlPři použití reaktivních tříd má přednost mobilní verze webové stránky. Třídy bez předpony „breakpoint“ platí pro všechny velikosti obrazovek, zatímco třídy s předponou začnou fungovat až od určité velikosti obrazovky (odpovídající dané předponě).

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.

<div class="text-sm md:text-base lg:text-lg">
  <!-- 在手机上字体小，在中等屏幕上变为基础大小，在大屏幕上变为大号字体 -->
  Reaktivní text
</div>

Stavové varianty

Pomocí předpon lze snadno aplikovat styly v různých stavech, včetně stavu přejetí myší („hover“).hover:), zaměření (focus:), aktivace (active:…) atd. To výrazně zjednodušuje psaní interaktivních vzorů.

<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none rounded">

Pokročilé funkce a praktické tipy

Hluboká personalizovaná konfigurace

tailwind.config.js Dokumenty jsou theme.extend Část těchto funkcí slouží k přidání nebo přepsání výchozích nastavení tématu. Například můžete přidat barvu značky nebo vlastní hodnotu mezery; tyto nové hodnoty budou stejně jako výchozí hodnoty generovat odpovídající užitečné třídy.

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

Extrahování komponent a použití @apply

Aby se předešlo opakovanému zapisování dlouhého řetězce stejných tříd v HTML, lze použít @apply Příkaz v CSS slouží k vytvoření znovupoužitelných tříd komponent. To je vhodné pro prvky, které se v projektu opakovaně vyskytují a jejichž vzhled je stálý (tj. mají stejný styl).

Doporučujeme k přečtení. Hlubší pochopení Tailwind CSS: od utilitárních tříd po moderní postupy webového vývoje.。

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply px-4 py-2 bg-brand text-white font-semibold rounded-lg hover:bg-opacity-90 transition-colors;
}

Poté to použijte v HTML:<button class="btn-primary">提交</button>

Používejte oficiální ekosystém pluginů.

Tailwind CSS Disponuje bohatou sadou oficiálních doplňků (plug-inů), které slouží k rozšíření funkcionalit. Například:@tailwindcss/forms Poskytněte formulářovým prvkům lepší výchozí styly.@tailwindcss/typography Pro renderování nejistého textu, jako je Markdown, poskytuje tento nástroj krásný formátovací vzhled. Stačí jej nainstalovat a nakonfigurovat v konfiguračním souboru. plugins Stačí jej přidat do pole (array).

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.

Integrace s moderními front-end frameworky

Tailwind CSS Integrace s frameworky jako React, Vue, Next.js, Nuxt.js a podobnými je již velmi vyspělá. Obvykle existují oficiální nástroje nebo komunitní šablony, které umožňují jednoduchou inicializaci aplikace s integrovanými funkcemi těchto frameworků. Tailwind Projekt je připraven k okamžitému použití – stačí ho rozbalit.

Například pomocí Next.js lze rychle vytvořit projekt:

npx create-next-app@latest --tailwind

Závěr

Tailwind CSS Díky svému přístupu založenému na atomárních třídách s důrazem na funkčnost zcela změnilo způsob, jakým vývojáři píšou CSS. Přesouvá rozhodování o vzhledu stránek na úroveň samotných značek (tagů), čímž zvyšuje rychlost vývoje a udržovatelnost kódu. Zároveň zajišťuje vysoký výkon díky inteligentnímu skenování obsahu stránek. Od rychlých prototypů až po rozsáhlé produkční aplikace je díky své vysoké přizpůsobivosti a silné podpoře responsivního designu a různých stavů (states) nepostradatelným nástrojem v moderním webovém vývoji. Ovládnutí jeho konfigurací, praktických systémů tříd a pokročilých technik vám umožní vytvářet efektivní a konzistentní uživatelské rozhraní.

Časté dotazy

Jsou názvy tříd v Tailwind CSS velmi dlouhé a ovlivňují čitelnost kódu HTML?

Toto je běžná počáteční obava. V praxi se vývojáři postupně seznámí s běžnými kombinacemi názvů tříd a tyto kombinace začnou používat. @apply Komponenty mohou být extrahovány do samostatných tříd nebo integrovány do front-end frameworků (jako jsou komponenty React nebo Vue), což umožňuje správu dlouhého seznamu tříd odděleně a zachovává čistotu hlavní šablony. Nástroje, jako je plugin Prettier, také mohou pomoci s formátováním pořadí názvů tříd a zlepšit jejich čitelnost.

Jak se liší Tailwind od tradičních knihoven komponent pro uživatelské rozhraní (UI), jako je Bootstrap?

Tradiční knihovny pro uživatelské rozhraní (UI) poskytují předpřipravené komponenty se pevně definovaným vzhledem (např. navigační lišty, karty). Jejich přizpůsobení obvykle vyžaduje psaní kódu, který přepisuje původní styly, což může vést k problémům s kompatibilitou mezi různými CSS styly a k nadměrnému zvětšení objemuTailwind CSS Nejsou poskytovány žádné konkrétní komponenty, pouze původní stylové “stavební kameny”. Dávají vývojářům plnou kontrolu nad designem, což umožňuje stavět jedinečné uživatelské rozhraní (UI) od nuly, přičemž zároveň je zajištěna konzistence celého designového systému.

Jak vybrat vlastní barevné schéma pro projekt?

Potřebujete to v konfiguračním souboru projektu. tailwind.config.js 的 theme.extend.colors Části mohou být definovány tak, že přímo přepíšete výchozí paletu barev nebo přidáte nové barvy. Názvy a hodnoty definovaných barev automaticky vytvoří odpovídající třídy určené k použití pro pozadí, text, ohraničení a další prvky.

Jak je v produkčním prostředí Tailwind CSS optimalizován z hlediska své velikosti (objemu)?

Během fáze výroby a sestavování…Tailwind Prohledá vaše konfigurační soubory. content Všechny zdrojové soubory určené v polích jsou prozkoumány a z nich jsou identifikovány názvy tříd, které jsou skutečně použity. Následně jsou do konečného souboru se styly generovány pouze CSS pravidla týkající se těchto použitých tříd, zatímco všechny nepoužité styly jsou odstraněny. Tento proces je automatický a zajišťuje, že výsledný CSS soubor je velmi stručný.

Podporuje režim tmavé barvy?

Ano,Tailwind CSS Má nativní a prvotřídní podporu pro režim tmavé barvy. Můžete to provést pomocí… dark: Pro aplikaci stylů v tmavém režimu na prvky je nejprve potřeba… tailwind.config.js Nastavit v nastaveních darkMode: 'class'(Nebo ‘media’), a poté to nastavíte na základním HTML prvku tak, že přidáte nebo odeberete odpovídající kód. class="dark" Přejděte do jiného režimu.

html