Čo je Tailwind CSS? Sprievodca pre tvorcov aplikácií jednoducho

Tailwind CSS je sada nástrojov na štýlovanie webových stránok. Namiesto písania samostatných štýlových pravidiel v osobitnom súbore dáte každému prvku krátke, hotové názvy tried — bg-white pre biele pozadie, p-4 pre odsadenie, text-lg pre väčší text, rounded-xl pre zaoblené rohy — a Tailwind vytvorí CSS, ktoré prehliadač potrebuje. Je zadarmo, je open source a patrí medzi najbežnejšie spôsoby štýlovania moderných webových aplikácií.

Prečo je Tailwind dôležitý, keď staviate s AI

Ak stavate webovú aplikáciu s AI tvorcom aplikácií, existuje dobrá šanca, že vaša aplikácia je štýlovaná pomocou Tailwindu. Mythex napríklad začína nové projekty na Vite + React + TypeScript + Tailwind, pokiaľ nepožiadate o niečo iné (ako sa technológia vyberá).

Pre vás to má tri dôsledky:

• Zmeny dizajnu sú lacné. Pretože štýlovanie je priamo pri každom tlačidle, karte a nadpise, AI môže zmeniť „nech sú karty menej preplnené“ úpravou niekoľkých názvov tried na jednom mieste.
• Dá sa to čítať. Triedy Tailwindu sa blížia obyčajnej angličtine. text-center font-bold text-2xl sa nedá ťažko rozlúštiť, aj keď ste nikdy nepísali kód.
• Vzhľad zostáva konzistentný. Tailwind prináša pevnú škálu veľkostí, medzier a farieb. Vďaka tomu aplikácia nemá 14 mierne odlišných odtieňov sivej.

Každodenná analógia

Predstavte si maľovanie a stavbu domu.

Čisté CSS je ako miešanie vlastnej farby pre každú stenu. Máte úplnú slobodu, ale po čase je obývačka „teplá biela“, chodba „o niečo teplejšia biela“ a nikto si nepamätá prečo.

Tailwind je ako farebná vzorkovnica v obchode s farbami plus sada označených nálepiek. Každá stena dostane nálepku — „biela, matná, 2 vrstvy“ — a vzorkovnica ponúka len vybranú sadu odtieňov. Trochu strácate na slobode, ale každý na stavbe presne vie, ako má stena vyzerať, len z nálepky.

Ako Tailwind funguje

Webová stránka sa skladá z HTML (obsah a štruktúra) a CSS (vzhľad). Bežne CSS žije v osobnom súbore s pravidlami ako tieto:

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

S Tailwindom toto pravidlo nepíšete a pridáte pomocné triedy priamo na prvok:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Vaša rezervácia je potvrdená
</div>

Každá trieda robí jednu malú úlohu. Pri zostavení aplikácie Tailwind prehľadá vaše súbory, nájde triedy, ktoré ste skutočne použili, a vygeneruje CSS len pre ne. Vďaka tomu je výsledný štýlový súbor malý.

Tailwind verzie 4, aktuálnej hlavnej verzie, sa nastavuje s veľmi malou konfiguráciou: nainštalujete ho, pridáte jeho plugin do nástroja na zostavenie a na začiatok CSS súboru vložíte @import "tailwindcss";. Úpravy ako značkové farby a písma sa definujú v CSS ako dizajnové tokeny, nie vo veľkom konfiguračnom súbore JavaScriptu, ako to vyžadovali staršie verzie. Ak čítate starší návod, ktorý spomína tailwind.config.js, práve preto.

Praktický príklad: cenová karta

Predpokladajme, že ste od AI tvorcu požiadali o stránku s cenami a chcete, aby karta „Pro“ vynikla. Kód karty môže vyzerať takto (v komponente React sa class zapisuje ako 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">
    Začať skúšobné obdobie
  </button>
</div>

Čítané zľava doprava:

Ak požiadate „nech karta Pro vynikne modrým rámikom a jemným tieňom“, AI môže zmeniť border-gray-200 na border-2 border-blue-600 a pridať shadow-lg. To je celá zmena.

Responzívny dizajn a tmavý režim

Tailwind má krátke predpony pre veľkosti obrazovky a stavy:

• md:grid-cols-3 — tri stĺpce na stredne veľkých obrazovkách a väčších; na telefóne platí predvolený jeden stĺpec. Tailwind je mobile-first: triedy bez predpony platia všade a predpony pridávajú zmeny pre väčšie obrazovky.
• hover:bg-gray-700 — tmavšie tlačidlo, keď je nad ním myš.
• dark:bg-gray-900 — iné pozadie, keď je zapnutý tmavý režim.

Preto je požiadať o responzívne rozloženie pre mobil alebo tmavý režim v projekte s Tailwindom zvyčajne rýchle.

Kľúčové pojmy

Bežné mylné predstavy

• „Tailwind je dizajn.“ Nie je. Tailwind dáva stavebné bloky, nie vzhľad. Dva weby s Tailwindom môžu vyzerať úplne inak. Všeobecný „vzhľad aplikácií od AI“ pochádza z predvolieb, nie z Tailwindu — dajte svojmu tvorcovi skutočné smerovanie. Pozri ako navrhnúť pekne vyzerajúcu aplikáciu s AI.
• „Je to to isté ako inline štýly.“ Nie celkom. Triedy pochádzajú zo spoločnej škály, podporujú hover, tmavý režim a breakpointy a pri zostavení sa premenia na bežné CSS.
• „Tailwind robí stránky ťažké.“ Zostavenie zahŕňa len triedy, ktoré používate, takže CSS odoslané návštevníkom je zvyčajne malé.
• „Dlhé zoznamy tried znamenajú neprehľadný kód.“ Na prvý pohľad pôsobia preplnene, ale všetko o vzhľade prvku je na jednom mieste. Opakujúce sa vzory sa zvyčajne vyčleňujú do komponentov, napríklad jedného Button.
• „Ak používam Tailwind, nemôžem použiť vlastné CSS.“ Obyčajné CSS môžete písať kedykoľvek potrebujete.

Čo požadovať od vášho AI tvorcu

• „Definuj farby značky a písma raz ako dizajnové tokeny a používaj ich všade namiesto pevne zadaných farieb.“
• „Nech každá karta, tlačidlo a vstupné pole používa rovnaký polomer rohov a medzery.“
• „Skontroluj rozloženie na šírke telefónu a oprav všetko, čo pretečie alebo je príliš malé na klepnutie.“
• „Pridaj tmavý režim pomocou varianty dark: z Tailwindu a over, že text zostane dobre čitateľný.“
• „Vyčleň opakujúce sa štýly tlačidiel do jedného znovupoužiteľného komponentu Button.“
• „Vysvetli triedy Tailwindu v tejto sekcii obyčajnou rečou.“

Tailwind v Mythex

Nové projekty v Mythex používajú Tailwind predvolene spolu s Reactom a TypeScriptom, takže vizuálne zmeny môžete požadovať obyčajnými slovami a vidieť ich v živom náhľade. Ak chcete vidieť kód, editor kódu zobrazuje každú triedu (len na čítanie vo Free, upraviteľný vo Pro). Ak dávate prednosť čistému CSS alebo inému nastaveniu, povedzte to vo svojom prvom prompte — dokumentácia vysvetľuje, ako sa stack vyberá.

Otázky