Shrnutí
Tailwind do CSS nic nového nepřidává, mění jen způsob stylování. Místo vytváření vlastních pojmenovaných tříd v CSS souboru se vzhled vytváří přidáváním hotových utility tříd v HTML.
| Zápis | Co znamená |
|---|---|
text-xl |
velké písmo |
bg-red-500 |
barva pozadí, červená s odstínem 500 |
p-4 |
padding velikosti čtyř kroků škály, tedy 16 pixelů |
md:grid-cols-2 |
od šířky md výše dva sloupce |
hover:bg-black |
jen při najetí myší |
dark:text-white |
jen v tmavém režimu |
w-[37px] |
hodnota mimo škálu, úniková cesta |
@theme { … } |
motiv, tedy tokeny, ze kterých utility vznikají (bonus) |
Umím?
- Vysvětlím, co znamená utility-first, a řeknu dvě výhody a dvě nevýhody.
- Připojím Tailwind přes Play CDN a vím, proč se tak nedělá na nasazeném webu.
- Najdu v dokumentaci utilitu pro vlastnost, kterou znám z CSS.
- Poskládám responzivní rozvržení předponami a vím, kterým směrem platí.
- Doplním prvku stavy a tmavý režim.
- Poskládám prvky vedle sebe a pod sebe pomocí flexboxu a mřížky.