Co je Tailwind CSS? Srozumitelný průvodce pro tvůrce aplikací

Tailwind CSS je sada nástrojů pro stylování webů. Místo psaní samostatných stylových pravidel v zvláštním souboru dáte každému prvku krátké, hotové názvy tříd — bg-white pro bílé pozadí, p-4 pro vnitřní odsazení, text-lg pro větší text, rounded-xl pro zaoblené rohy — a Tailwind vytvoří CSS, které prohlížeč potřebuje. Je zdarma, je open source a je jedním z nejběžnějších způsobů, jak se stylují moderní webové aplikace.

Proč je Tailwind důležitý, když stavíte s AI

Pokud vytváříte webovou aplikaci s AI tvůrcem, je dobrá šance, že je stylovaná pomocí Tailwindu. Mythex například nové projekty zakládá na Vite + React + TypeScript + Tailwind, pokud nepožádáte o něco jiného (jak se volí technologie).

Pro vás to znamená tři věci:

• Změny designu jsou levné. Protože styl je hned vedle každého tlačítka, karty a nadpisu, může AI změnit „udělej karty méně přeplněné“ úpravou několika tříd na jednom místě.
• Můžete to číst. Třídy Tailwindu jsou blízké běžné angličtině. text-center font-bold text-2xl není těžké dešifrovat, i když jste nikdy nepsali kód.
• Vzhled zůstává konzistentní. Tailwind má pevnou škálu velikostí, mezer a barev. Díky tomu aplikace nemá 14 mírně odlišných odstínů šedé.

Každodenní přirovnání

Představte si malování domu.

Čisté CSS je jako míchání vlastní barvy pro každou stěnu. Máte naprostou volnost, ale po čase je obývák „teplá bílá“, chodba „trochu teplejší bílá“ a nikdo si nepamatuje proč.

Tailwind je jako barevník z obchodu s barvami a sada popisků. Každá stěna dostane štítek „bílá, matná, 2 vrstvy“ a barevník nabízí jen vybrané odstíny. Trochu přijdete o volnost, ale každý na stavbě ví přesně, jak má stěna vypadat, jen z toho štítku.

Jak Tailwind funguje

Webová stránka se skládá z HTML (obsah a struktura) a CSS (vzhled). Obvykle CSS žije v samostatném souboru s pravidly jako tato:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

S Tailwindem toto pravidlo nepíšete a utility třídy dáte rovnou na prvek:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

Každá třída dělá jednu malou věc. Když se aplikace sestavuje, Tailwind projde vaše soubory, najde třídy, které jste skutečně použili, a vygeneruje CSS jen pro ně. Díky tomu je výsledný styl malý.

Tailwind verze 4, aktuální hlavní verze, se nastavuje s minimem konfigurace: nainstalujete ho, přidáte jeho plugin do nástroje pro sestavení a na začátek CSS souboru napíšete @import "tailwindcss";. Vlastní úpravy, jako jsou značkové barvy a písma, se definují v CSS jako design tokeny, ne ve velkém konfiguračním JavaScriptovém souboru, jak to vyžadovaly starší verze. Pokud čtete starší návod, který zmiňuje tailwind.config.js, je to proto.

Praktický příklad: cenová karta

Předpokládejme, že jste od AI tvůrce požadovali stránku s cenami a chcete, aby karta „Pro“ vynikla. Kód karty může vypadat takto (v komponentě React se class píše jako className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

Čtení zleva doprava:

Pokud požádáte „ať karta Pro vynikne modrým rámečkem a jemným stínem“, AI může změnit border-gray-200 na border-2 border-blue-600 a přidat shadow-lg. To je celá změna.

Responzivní design a tmavý režim

Tailwind má krátké předpony pro velikosti obrazovky a stavy:

• md:grid-cols-3 — tři sloupce na středních a větších obrazovkách; na telefonu platí výchozí jeden sloupec. Tailwind je mobile-first: třídy bez předpony platí všude a předpony přidávají změny pro větší obrazovky.
• hover:bg-gray-700 — tmavší tlačítko, když je nad ním myš.
• dark:bg-gray-900 — jiné pozadí, když je zapnutý tmavý režim.

Proto je žádost o responzivní rozvržení pro mobil nebo tmavý režim v projektu s Tailwindem obvykle rychlá.

Klíčové pojmy

Časté mylné představy

• „Tailwind je design.“ Není. Tailwind dává stavební prvky, ne vzhled. Dva weby postavené na Tailwindu mohou vypadat úplně jinak. Typický „vzhled aplikace od AI“ pochází z výchozích nastavení, ne z Tailwindu — dejte svému tvůrci skutečné zadání. Viz jak navrhnout dobře vypadající aplikaci s AI.
• „Je to totéž co inline styly.“ Ne tak docela. Třídy pocházejí ze sdílené škály, podporují hover, tmavý režim a breakpointy a při sestavení se mění na běžné CSS.
• „Tailwind dělá stránky těžké.“ Sestavení obsahuje jen třídy, které používáte, takže CSS posílané návštěvníkům je obvykle malé.
• „Dlouhé seznamy tříd znamenají nepřehledný kód.“ Na první pohled vypadají přeplněně, ale všechno o vzhledu prvku je na jednom místě. Opakující se vzory se obvykle vytahují do komponent, například jediné komponenty Button.
• „Když používám Tailwind, nemohu použít vlastní CSS.“ Pořád můžete psát běžné CSS, kdykoli ho potřebujete.

Co žádat od AI tvůrce

• „Definuj značkové barvy a písma jednou jako theme tokeny a používej je všude místo napevno zadaných barev.“
• „Ať každá karta, tlačítko a vstupní pole používá stejný poloměr zaoblení a stejné mezery.“
• „Zkontroluj rozvržení na šířce telefonu a oprav vše, co přetéká nebo je příliš malé na klepnutí.“
• „Přidej tmavý režim pomocí varianty dark: z Tailwindu a dbej na to, aby byl text dobře čitelný.“
• „Vytáhni opakované styly tlačítek do jedné znovupoužitelné komponenty Button.“
• „Vysvětli třídy Tailwindu v této sekci obyčejnou řečí.“

Tailwind v Mythexu

Nové projekty Mythexu používají Tailwind jako výchozí spolu s Reactem a TypeScriptem, takže vizuální změny můžete zadávat obyčejnými slovy a vidět je v živém náhledu. Pokud chcete vidět kód, editor kódu ukazuje všechny třídy (jen ke čtení v Free, upravitelný v Pro). Pokud preferujete čisté CSS nebo jiné nastavení, řekněte to už v prvním zadání — dokumentace vysvětluje, jak se stack volí.

Otázky