Kterou cestu zvolit

Teď už znáte několik způsobů, jak v Tailwindu prvek nastylovat. Tady je přehled, kdy použít který:

Co potřebujete	Co použít	Příklad
Nastylovat prvek (většinou)	utility třídy v HTML	`p-4 text-center`
Hodnotu, kterou použijete jen jednou a v motivu není	libovolnou hodnotu v hranatých závorkách	`w-[350px]`
Barvy, písma a další hodnoty vašeho designu, které používáte na mnoha místech	motiv: `@theme`	`--color-brand-500`
Stejný seznam tříd na mnoha prvcích	šablonu nebo komponentu, pokud je máte, nebo úpravu všech míst najednou; jinak třídu s `@apply` v bloku `@layer components`	`.tlacitko`
CSS, pro které Tailwind nemá třídu, i s variantami	`@utility`	`bg-pruhy`

A ještě dvě rady:

Nedělejte třídu na všechno. Kdyby každý prvek dostal vlastní třídu s @apply, psali byste zase pravidla jako v kurzu CSS, jen jinak. Přišli byste o to, co dělá Tailwind praktickým: vzhled vidíte přímo v HTML a nemusíte vymýšlet jména. @apply si nechte na malé kousky, které se často opakují: tlačítka, štítky, formulářová pole.
Libovolná hodnota použitá dvakrát patří do motivu. Hranaté závorky jsou v pořádku pro jedinou výjimku, třeba pro přesnou šířku loga. Když se ale stejná hodnota objeví znovu, je součástí vašeho designu: dejte jí jméno v @theme.

Na naší stránce jsou dvě takové hodnoty. Když stránka vznikala, někdo zkopíroval dvě barvy z návrhu útulku jako libovolné hodnoty: pozadí úvodní sekce bg-[#ffedd5] a barvu odkazu Přispět text-[#ea580c]. Podívejte se pozorně: #ea580c je naše brand-600. A #ffedd5 je světlý odstín téže oranžové, takže také patří mezi barvy značky, jako brand-100.

Pokyny

Do @theme přidejte barvu --color-brand-100: #ffedd5;.

U úvodní sekce (section) nahraďte bg-[#ffedd5] třídou bg-brand-100.

U odkazu Přispět v záhlaví nahraďte text-[#ea580c] třídou text-brand-600.

Začněte programovat zdarma

6/7