Úvodní příručka: Naučte se používat Tailwind CSS k vytváření responsivních uživatelských rozhraní

Začněte používat Tailwind CSS V takovém případě musíte nejprve tento komponent nebo nástroj integrovat do svého projektu. Nejběžnějším způsobem je instalace pomocí nástrojů pro správu balíčků. Pokud používáte… npm 或 yarnLze ho snadno přidat jako vývojovou závislost. Po instalaci se základní konfigurace obvykle provádí pomocí nástroje s názvem… tailwind.config.js Konfigurační soubor se používá k dokončení nastavení vašeho designového systému. V tomto souboru můžete definovat různé aspekty vašeho designového systému, jako jsou tématické barvy, písma, poměry mezi prvky atd., a tak vytvořit vzhled, který odpovídá stylu vašeho projektu. Tailwind CSS Verze.

Pro použití v projektu Tailwind CSSPotřebujete do svého hlavního CSS souboru zavést příslušné instrukce. Tento soubor se obvykle nazývá… input.css 或 styles.cssProstřednictvím @tailwind Instrukce – můžete je vložit. Tailwind CSS Základní styly, třídy komponent a nástrojové třídy. Poté potřebujete proces vývoje (např. pomocí PostCSS), který bude tento CSS soubor zpracovávat a vytvoří konečný soubor se styly určený k použití v produkčním prostředí.

Jedna jednoduchá struktura projektu může vypadat následovně:

Doporučujeme k přečtení. Kompletní průvodce Tailwind CSS: průvodce moderním CSS frameworkem od základů po praktické využití.。

your-project/
├── src/
│   ├── styles/
│   │   └── input.css
│   └── index.html
├── tailwind.config.js
├── package.json
└── postcss.config.js

Ve vašem input.css Ve souboru je obsah obvykle následující:

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 →

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

Tento proces zajišťuje, že budete mít přístup… Tailwind CSS Všechny poskytnuté užitečné třídy.

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

Tailwind CSS Jádrem tohoto přístupu je koncept „Utility-First“ (Užitelnost na prvním místě). Znamená to, že styly vytváříte přímo kombinací velkého množství drobných, na jediný účel určených tříd, místo psaní tradičních CSS pravidel nebo vytváření vlastních komponentních tříd. Tento způsob vám umožňuje rychle iterovat v návrhu a zároveň udržovat stylové soubory v malých rozměrech.

Porozumění pojmenovávání užitečných tříd

Názvy užitkových funkcí mají velmi přehledný vzorec a obvykle se řídí vzorem “vlastnost-hodnota” nebo “vlastnost-bod přerušení-hodnota”. Například:text-blue-500 Znamená to nastavení barvy textu na úroveň 500 z modrého palety barev.p-4 Znamená to, že se vnitřní mezera aplikuje ve všech směrech (padding) ve výši 4 jednotek. md:p-6 To znamená, že pro velikosti obrazovek od středních (md) a větších se mezery (padding) změní na 6 jednotek.

Tento způsob pojmenovávání zajišťuje velmi plynulý proces učení – jakmile zvládnete základní vzorce pojmenovávání, můžete odvodit funkce většiny tříd. Například, pokud víte… m-2 Jde o marginy (okraje textových prvků). mt-2(margin-top)mx-auto„Horizontální automatické okraje“ je snadno pochopitelný koncept.

Doporučujeme k přečtení. Ultimátní průvodce CSS frameworkem Tailwind: Od základů po pokročilé znalosti – vytváření moderních, responzivních webových stránek。

Responzivní design

Reaktivní design je vestavěný do… Tailwind CSS V genech. Rámec standardně poskytuje pět breakpointů:sm、md、lg、xl、2xlChcete-li aplikovat styl na konkrétní bod přerušení (breakpoint), stačí před užitečnou třídu přidat předponu označující tento bod přerušení a tečku. Například:<div class="“text-sm" md:text-base lg:text-lg”> Bude vytvořen text, který bude zobrazen v malém rozlišení pomocí malého písma, ve středním rozlišení pomocí běžného písma a ve velkém rozlišení pomocí velkého písma. Nemusíte psát žádné media queries – veškerá responsivní logika je zpracována pomocí třídních jmen.

Vytvoření reaktivního rozvrhu

Použití Tailwind CSS Vytvoření flexibilního rozvrhu je jak intuitivní, tak i efektivní. Frameworky poskytují silné nástroje pro budování reaktivních rozhraní – od jednoduchých po složitější.

Použití technik Flexbox a Grid

Pro jednovrstvou úpravu můžete použít přímo… flex、flex-col、items-center、justify-between Pro rychlé implementování rozvrhu pomocí technologie Flexbox lze využít příslušné třídy. Pro složitější dvourozměrné rozvrhy je však potřeba použít další nástroje a metody.grid、grid-cols-3、gap-4 Takové nástroje vám umožní snadno pracovat s CSS Grid.

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.

Například vytvoření třísloupcového rozvrhu, který se na mobilních zařízeních vertikálně skládá a na stolních počítačích horizontálně uspořádá, je velmi jednoduché:

<div class="“container" mx-auto p-4”>
  <div class="“flex" flex-col md:flex-row gap-4”>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Kolona 1</div>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Kolona 2</div>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Kolona tři</div>
  </div>
</div>

V nahozeném kódu,container Tato třída poskytuje kontejner, který je umístěn uprostřed stránky a má omezení na maximální šířku.flex-col V podporovaném (mobilním) režimu vytvořte vertikální uspořádání. md:flex-row Na středně velkých obrazovkách a větších se má zobrazovat v horizontálním uspořádání.gap-4 Přidání mezery mezi dílčími prvky.

Zpracování kontejnerů a mezer

Tailwind CSS Tento systém pro nastavování rozestupů mezi prvky je založen na konfigurovatelném poměru (výchozí hodnota je násobek čísla 4px – např. 1 odpovídá 0,25rem). Díky tomu je velmi snadné udržovat konzistentní rozložení prvků ve všech vlastnostech, jako jsou margin, padding, gap, width, height atd. p-6、m-2、space-x-4 U takových tříd můžete přesně ovládat vztahy mezi prvky a uvnitř jednotlivých prvků, aniž byste museli neustále přemýšlet nad hodnotami v pixelech.

Doporučujeme k přečtení. Co dělá z Tailwind CSS preferovaný framework pro moderní vývoj frontendu?。

Personalizace a pokročilé funkce

Ačkoliv Tailwind CSS Je připraven k použití hned po rozbalení, ale jeho skutečná síla spočívá v jeho vysoké přizpůsobivosti. Téměř každá výchozí hodnota lze upravit pomocí konfiguračního souboru.

Konfigurační designový token

在 tailwind.config.js V souboru můžete rozšířit nebo přepsat výchozí nastavení tématu. Například můžete přidat barvy značky, vlastní sadu písem, změnit hodnoty přerušení („breakpoints“) nebo vytvořit vlastní poměry mezer („spacing ratios“).

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.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1d4ed8’,
      },
      fontFamily: {
        ‘sans’: [‘Inter’, ‘system-ui’, ‘sans-serif’],
      },
    },
  },
  // ... 其他配置
}

Po dokončení konfigurace můžete produkt používat přímo. text-brand-blue 或 font-sans Taková třída. Tento způsob správy designových tokenů soustředí rozhodnutí o designu na jednom místě, což zajišťuje vizuální konzistenci celého projektu.

Vytvoření znovupoužitelných komponent

I když je praktičnost prioritou, stále můžete… @apply Vytvořte vlastní CSS třídy pomocí praktického vzoru pro extrakci opakujících se instrukcí. To je velmi užitečné, pokud máte složité kombinace stylů, které se opakují na více místech.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}

Poté můžete to použít v HTML. <button class=“btn-primary”>Všimněte si, že…Tailwind CSS Oficiální doporučení je používat tento produkt s opatrností. @applyPřednostně zvažujte kombinaci užitečných tříd přímo v HTML, abyste zachovali udržovatelnost kódu. Pro skutečně složité komponenty by měl být použit komponentový mechanismus JavaScriptových frameworků (jako jsou React nebo Vue) k jejich zabalení.

Optimalizace výkonu a nasazení do produkčního prostředí

Po dokončení vývoje projektu je nutné optimalizovat soubory se styly pro produkční prostředí.Tailwind CSS Bude generováno velké množství užitečných klasů, ale vaše projekt pravděpodobně využije pouze část z nich. Přímé nasazení neoptimalizovaných souborů bude zahrnovat velké množství zbytečného kódu.

Použití nástroje PurgeCSS k „pročištění“ kódu (tj. odstranění nepotřebných částí kódu)

Při vytváření produkční verze,Tailwind CSS Bude spolupracovat s… PurgeCSSBylo integrováno do novějších verzí. tailwindcss Sám o sobě spolupracuje s ostatními nástroji. Prohledá vaše HTML, JavaScript komponenty a další šablonové soubory, vyhledá názvy tříd, které skutečně používáte, a poté odstraní všechny nepoužité styly. Tím se obvykle velikost výsledného CSS souboru sníží z několika megabajtů na několik kilobajtů až několik desítek kilobajtů.

Konfigurace se obvykle provádí… tailwind.config.js Dokončeno v čínštině:

module.exports = {
  purge: [‘./src/**/*.{html,js,jsx,ts,tsx,vue}’],
  // ... 其他配置
}

Potřebujete uvést všechny cesty k zdrojovým souborům, které obsahují název vaší třídy – nástroj na výstavbu projektu se o zbytek postará automaticky.

Aktivovat režim JIT

Od určité verze…Tailwind CSS Byl zaveden just-in-time (JIT) engine. V režimu JIT jsou styly generovány na požádání, namísto toho, aby byl nejprve vytvořen obrovský soubor se všemi možnými styly. To znamená:
1. Rychlost vývoje a sestavování produktů je extrémně vysoká.
2. Můžete použít jakékoli hodnoty. top-[-113px] 或 text-[#1d4ed8]A to bez nutnosti předchozího definování v konfiguraci.
3. Výrobní procesy jsou v podstatě také realizovány na základě požadavků („on-demand“), a proto není potřeba složitých… purge Konfigurace i výkon jsou stejně vynikající.

Pro aktivaci režimu JIT stačí jednoduše nastavit to v konfiguračním souboru. mode Nastavit na ‘jit’A uveďte také cestu ke svému zdrojovému souboru.

Závěr

Tailwind CSS Díky své praktické metodologii zcela změnilo způsob, jakým vývojáři vytvářejí uživatelské rozhraní. Přesunulo rozhodování o vzhledu stránek z souborů CSS do HTML kódu nebo šablon, čímž byla dosažena úžasná rychlost vývoje a vysoká konzistence designu. Od rychlého začátku používání tohoto nástroje, po pochopení jeho základních systémů praktických tříd, přes vytváření složitých reaktivních rozvrhů, až po hlubokou personalizaci designového systému a optimalizaci výkonnosti v produkčním prostředí.Tailwind CSS Byl poskytnut kompletní, efektivní a rozšiřitelný sada nástrojů. Znalost této sady znamená, že se můžete více soustředit na vytváření rozhraní, která kombinují funkčnost a estetiku, aniž byste museli vynakládat příliš mnoho úsilí na nastavení stylové architektury a pravidel pojmenovávání.

Časté dotazy

Vytváří Tailwind CSS mnoho názvů tříd, což může způsobit, že HTML bude příliš „nafouklý“ (tj. obsahově neúčelný nebo složitý)?

Ano, to je jedna z běžných vlastností frameworku „Practicality First“. Toto se vztahuje k HTML elementům. class Atributy mohou být poměrně dlouhé. Avšak to je obvykle považováno za určitou kompromisní dohodu. I když se velikost HTML souborů mírně zvýší, CSS soubory po optimalizaci stávají velmi malými a prohlížeče zpracovávají HTML velmi rychle. Mnoho vývojářů se domnívá, že tato „nadváha“ je zcela přijatelná ve srovnání s rychlostí vývoje, udržovatelností a flexibilitou, které to přináší. V komponentových frameworkech (jako jsou React, Vue) lze tyto dlouhé atributy ukryt v samotných komponentách, čímž je vnější vzhled kódu zůstává jednoduchý.

Jak přepsat nebo resetovat styly třetích komponent v rámci frameworku Tailwind CSS?

Když se začne používat… Tailwind CSS Při použití knihovny třetích stran mohou nastat konflikty mezi styly. Existuje několik strategií, jak s tímto problémem naložit: 1. Zvýšit specifickost: Používejte konkrétnější třídy nebo selektory k definování vašich stylů. 2. !importantPřidejte to za třídy určené k praktickému využití. ! Předpony, například… bg-red-500!(V režimu JIT), ale to by mělo být používáno s opatrností. 3. Upravte pořadí v konfiguraci: ujistěte se, že váš CSS je načten až po CSS ze sbírky komponent. 4. Nejzásadnější metodou je, pokud to sbírka komponent dovoluje, můžete její CSS začlenit do svého projektu. Tailwind CSS Je to součást “základního” stylu, takže vaše praktické třídy mohou vycházet ze stejných designových pravidel a mít vyšší prioritu.

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

Tailwind CSS Jedná se o CSS framework, který dokonale spolupracuje se jakýmkoli front-end technologickým stackem schopným vytvářet HTML. Je obzvláště populární v moderních JavaScript frameworkech a knihovnách, jako jsou React, Vue.js, Angular, Svelte a Next.js. Modely komponent těchto frameworků jsou velmi vhodné pro integraci s tímto CSS frameworkem. Tailwind CSS Kombinace praktických tříd navzájem doplňuje jejich funkce – můžete styly i strukturu zabalit do jediné komponenty. Oficiální stránky také poskytují integrační doplňky a nástroje určené pro frameworky jako React a Vue, které ještě více zlepšují vývojový proces.

Jak zajistit konzistentní používání názvů tříd Tailwind v týmových projektech?

K udržení konzistence jsou potřebné určité normy a nástroje. Za prvé je důležité je správně využívat. tailwind.config.js Soubory slouží k centralizovanému správování designových parametrů, jako jsou barvy značky, mezery mezi prvky, písma a další designové prvky, aby bylo zajištěno, že všichni používají stejný designový systém. Dále lze využít doplňky pro editory (např. Tailwind CSS IntelliSense), které poskytují funkce automatického doplňování textu a náhledů při přejetí myší nad prvky stránky, čímž se snižuje zátěž na paměť a počet překlepů. U složitějších kombinací stylů může tým dohodnout konkrétní způsoby jejich použití. @apply Vytvořte sadu uznávaných a často používaných komponent (jako jsou tlačítka, karty) nebo přímo vytvořte odpovídající frameworkové komponenty. Kromě toho použijte plugin Prettier. prettier-plugin-tailwindcss Lze to automaticky upravit. class Seřaďte názvy tříd v atributech a sjednotěte styl kódu.