Tailwind CSS: další evoluční krok pro CSS frameworky

CSS framework, který má vcelku slušnou šanci změnit mnohým z nás způsoby, jakými jsme zvyklí psát HTML a CSS kód.

Propaguje zápis pomocí utilitárních tříd, tedy více HTML a méně CSS. Dělá to ve jménu zlepšení zážitku vývojáře – zjednodušení jeho práce. Ve jménu produktivity.

Tailwindem se pár měsíců zabývám a v mnohém se mi tenhle přístup líbí. V tomhle článku se pokusím shrnout, o co jde a kdo z vás by Tailwindu měl věnovat pozornost.

Popularita

Z pohledu počtu hvězdiček na Githubu to ještě tak moc vidět není. tailwindlabs/tailwindcss jich má asi 45 tisíc, podobně jako další nový framework Bulma (jgthms/bulma). Kam se hrabou na Bootstrap se 150 tisíci hvězdičkami.

Zajímavější je pohled do ankety State of CSS 2021 – spokojenost uživatelů s Tailwindem je 90 %, jedna z nejvyšších vůbec.

State of CSS 2020:

Spokojenost s frameworkem Bulma je kolem 60 %. A s Bootstrapem je spokojená jen necelá polovina uživatelů.

Díky dramatickému nárůstu uživatelské základy získal Tailwind v téhle anketě ocenění Most Adopted Technology.

Utility? Ne, utility-first framework

Mě na Tailwindu nejvíc zaujalo zaměření na utility (jinak též atomické nebo užitkové CSS). Jednotlivé třídy totiž reprezentují vlastnosti a jejich vybrané hodnoty:

<button class="rounded-md bg-black text-white" type="submit">
  Buy now
</button>

Jak asi předpokládáte, tento kód vytvoří černé tlačítko s bílým textem a středně zakulacenými rohy. Viz ukázka: play.tailwindcss.com/EgD4vOaAFv.

Z mých dřívějších textů možná víte, že atomický přístup mě osobně vyhovuje, protože představuje nízkoúrovňový systém designu.

Jakmile jej dostanete do hlavy, psaní kódu vám začne jít výrazně rychleji, protože nejste nucení přepínat kontexty CSS a HTML.

Podmínkou pro správné využití atomických tříd je ovšem možnost abstrakce – nechci přeci každé tlačítko znovu zapisovat jako kombinaci mnoha jednotlivých tříd.

A právě Tailwind dotáhl možnosti abstrakce ze všech utility frameworků nejdál.

Abstrakce a komponenty stále žijí

O Tailwindu nejde mluvit jako o „utility frameworku“, kam spadá třeba starší Tachyons. V případě Tailwind CSS jde o „utility first“ framework.

Pomocí užitkových tříd buď přímo zapisujete CSS kód nebo je použijete k abstrahování.

Nejjednodušší možností abstrakce je direktiva @apply. pomocí níž prostě jednodušší komponenty zapíšete pomocí staré dobré metodiky BEM:

.btn {
  @apply rounded-md bg-black text-white;
}

.btn--secondary {
  @apply bg-gray-100 text-black;
}

Viz ukázka: play.tailwindcss.com/61qN16fO0Y.

Pro složitější komponenty ovšem @apply není dobrou cestou a tak vám spolu s autory frameworku vřele doporučuji využívat komponentová zobecnění šablonovacícho frameworku, který používáte.

Zde je zjednodušený příklad ve Vue.js:

// Recipes.vue:

<template>
  <div class="divide-y divide-gray-100">
    <Nav>
      // …
    </Nav>
  </div>
</template>

// Nav.vue:

<template>
  <nav class="p-4">
    <ul class="flex space-x-2">
      <slot></slot>
    </ul>
  </nav>
</template>

Další z možností abstrakce je napsání vlastního pluginu do tailwind.confing.js.

Jakýkoliv design

V podcastu o Tailwindu jsme s Robinem Pokorným, Honzou Bienem a Adamem Kudrnou rozebírali rozdíly mezi Bootstrapem a Tailwindem.

Mimo jiné jsme došli k tomu, že Bootstrap má, přes velké možnosti úprav vzhledu pomocí nastavení v preprocesoru, určitou tendenci ovlivňovat vzhled výsledku.

Na velké části webů a webových aplikací, používajících nejznámější CSS framework, je tenhle framework prostě vizuálně poznat. (A na další velké části webů je použitý úplně zbytečně.)

Tailwind je v tomhle jiný – nenabídne vám hotové komponenty, ale nízkoúrovňový CSS framework nad konkrétními vlastnosti a sadou předvybraných (a nastavitelných) hodnot.

Toto velmi ocení typičtí „CSSkaři“ – frontendové kodérky a kodéři, jejichž běžným úkolem je kódování velmi odlišných designů webu.

Jak ve své přednášce říká Honza Bien: Tailwind je první CSS framework, který mu umožnil rychle nakódovat jakýkoliv design.

Má pravdu, Webmistr.

Bootstrap versus Tailwind: komponenty versus utility?

Možnost nakódovat jakýkoliv design je skvělá pro někoho, kdo CSSka velmi dobře zvládá a potřebuje zrychlit svou práci, ale ne pro typického uživatele Bootstrapu – vývojáře, který do detailů CSS až tak vidět nechce nebo nemůže.

Zatímco Bootstrap je „component-first“ a až v posledních verzích začal hojně přidávat utility, Tailwind na to jde z druhé strany – DNA frameworku tvoří právě utility a komponenty si buď postavíte sami nebo využijete některé předpřipravené externí nástroje, jako Taiwind UI, Headless UI nebo Heroicons pro ikony.

I tyto dva přístupy jsme srovnávali v květnovém vydání podcastu:

Je vůbec zajímavé sledovat, jak nově vzniknuvší konkurence přinutila autory Bootstrapu reagovat. Jejich přístup k utilitám a rychlá reakce na Tailwind jsou určitě pozoruhodné.

Bootstrap má však jiné DNA. Je postavený na preprocesoru Sass, takže klasika.

V Tailwindu veškeré nastavování probíhá na úrovni JavaScriptu – jednak nad PostCSS, ale také ve velmi mocném konfiguračním souboru.

Konfigurace: velká síla na pozadí

Soubor tailwind.config.js obstarává kompletní konfiguraci Tailwindu. Díky použití JS se zde mohou vcelku silně rozšiřovat možnosti frameworku.

Jako nejjednodušší úroveň si asi lze představit nastavování barev a podobných elementů designu:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }
}

Dále je například možné přidat vlastní utility:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      boxShadow: {
        embos: '1px 1px 2px rgb(0 0 0 / 25%), inset -1px -1px 1px rgb(0 0 0 / 25%)',
      },
    }
  }
}

Vybrat z předpřipravených pluginů…

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

…nebo přidat vlastní. V dokumentaci pluginů uvidíte, jak mocný nástroj je možné vytvořit, když dovolíte konfiguraci na úrovni JavaScriptu, tedy plnohodnotného programovacího jazyka.

Varianty: stavy, pseudotřídy, breakpointy…

I když v Tailwindu vzhled zapisujete pomocí tříd, existují jejich varianty, pro responzivní breakpointy:

<button class="bg-black text-white p-2 sm:p-4 rounded" type="submit">Buy now</button>

V této ukázce bude mít tlačítko větší vnitřní okraj (padding) na šířkách obrazovky od breakpoitu sm – viz třída sm:p-4. Na menších poloviční – p-2. Viz demo: play.tailwindcss.com/EoXdekog6A

Všem těmto podmínečným zobrazením, jako jsou konkrétní body zlomu designu, stav po najetí myši, mód tmavého zobrazení… říkají autoři tohoto frameworku varianty a máte jich k dispozici téměř dvacet.

Pro koho to je a co já na to?

Pokud fandíte přístupu s psaním utility tříd, pak asi moc neváhejte - Tailwind je myslím v této oblasti ze všech frameworků nejdál.

Tailwind je také velmi vhodný pro ty, kteří pracují agenturně, takže kódují různé designy webů a konvenční komponentové frameworky jako Bootstrap pro ně nebyly. Jakmile jej dostanete do krve, jsem přesvědčený, že vám ušetří spousty kóderského času.

Já už aktivně a za peníze CSSka nepíšu, ale frameworky mě zajímají (už jen kvůli konzultací k rychlosti webů) a Tailwind jsem použil na některých osobních projektech. Pokud bych na to měl čas, pravděpodobně bych jej nasadil i zde na Vzhůru dolů, kde používám kombinaci vlastního utility frameworku a BEMovských komponent.

Pokud odhlédnu od své specifické situace, nebojím se říct, že Tailwind mě nadchnul. Mentální zábrany používat utility třídy jsem si vnitřně zboural už před lety a velmi oceňuji praktičnost tohoto přístupu.

Co se mi na Tailwindu líbí?

• V oblasti utility frameworků je rozhodně nejdál.
• Jde aktivně naproti možnosti abstrakce utilit do komponent.
• Má skvělou dokumentaci, což je vždy základ úspěšnosti nástroje.
• Při správné práci (JIT kompilace) s ním tvoří velmi malé CSS.
• Má výborně vymyšlenou konfiguraci, takže je možné jej od základu předělat pro vlastní potřeby.
• Stavy a responzivita řešená prefixy v názvech tříd (sm:hover:opacity-75).
• Ve verzi 2.1 autoři přidali možnost vkládat libovolné hodnoty přímo do tříd v HTML: top-[-113px] nebo md:top-[-113px], což je… mindfucking.

Co se mi na Tailwindu nelíbí? Kromě jediné věci, té první v následujícím seznamu, asi nic.

Zbytek je spíše o nevýhodách pro určitou skupinu lidí, vycházejících ze zcela jiného pojetí frameworku než na jaké jsme zvyklí např. u Bootstrapu.

• Některé názvy utilit úplně nekorespondují s vlastnostmi v CSS (leading = line-height) a je tak nutné se učit nová pojmenování.
• Díky použití PostCSS a JavaScriptu bude kombinace s preprocesory jako Sass trošku skřípat.
• Pro úspěšnou práci s Tailwindem byste měli znát CSS, což např. u Bootstrapu tak moc neplatí.
• Zobecňování do komponent se neděje na úrovni CSS, takže kodérka či kodér musejí umět pracovat se šablonovacím jazykem.

Kam dál?

V článku jsem se pokusil o úvod pro nezasvěcené. Kam dál pokračovat?

• Záznam z mého webináře Atomické CSS a Tailwind, kde vše vysvětluji na živých ukázkách a vezme vám to necelou hodinu času.
• Pokud ještě nejste přesvědčeni o utilitách: Moje články: K čemu jsou dobré? a kombinování s komponentami. Adam Wathan: “Best practices” don’t actually work.
• Pokud se Tailwind chcete naučit na videích a máte dost času: kurz od Yablko nebo Tailwind from zero to production.
• Tailwind Play, pískoviště, kde je možné framework zkoušet a to včetně nastavení konfigurace.

Zapomněl jsem na něco? Napište mi do komentářů nebo e-mailem o vašich zkušenostech s Tailwindem.