Opakované třídy

Podívejte se na čtyři tlačítka Adoptovat v kartách koček. Každé z nich má seznam devíti tříd a ty seznamy by měly být stejné:

<a href="#" class="mt-4 inline-block rounded-full bg-brand-500 px-5 py-2 font-semibold text-white hover:bg-brand-600">Adoptovat Mourka</a>

Tak to v Tailwindu chodí: každý prvek přímo v HTML říká, jak vypadá. Většinou je to výhoda. Vzhled prvku vidíte tam, kde prvek je, a když jeden prvek změníte, nemůžete tím omylem pokazit jiný. Když se ale prvek opakuje, opakuje se s ním i jeho seznam tříd. Pokud bude útulek chtít jiná tlačítka, budete muset stejným způsobem změnit všechny čtyři seznamy. A když na jeden zapomenete, bude to tlačítko vypadat jinak než ostatní. Na naší stránce se to už stalo: někdo změnil rohy tlačítek z rounded-lg na rounded-full a na jedno tlačítko zapomněl. Podívejte se pozorně do náhledu.

Co s tím?

• Napsat prvek jen jednou. Skutečné weby se málokdy píšou ručně, karta po kartě. Seznam koček by přišel z databáze a karta by byla napsaná jen jednou, v šabloně nebo komponentě (znovu použitelném kousku stránky, jaké používají javascriptové frameworky, třeba React). Kód by ji pak zopakoval pro každou kočku. Tak jsou na jednom místě i její třídy. Tohle řešení doporučují autoři Tailwindu jako první.
• Upravit všechna místa najednou. Když jsou opakované prvky blízko u sebe jako naše čtyři tlačítka, můžete je prostě změnit všechny. Editory kódu vám s tím pomohou, i tento: označte kousek textu a stiskněte Ctrl+D (na Macu Cmd+D) a označí se i další místo se stejným textem. Každé další stisknutí přidá další. Co pak napíšete, napíše se na všechna označená místa najednou.
• Pojmenovat seznam tříd. Když nepomůže ani jedno, dovolí vám Tailwind vytvořit vlastní třídu ze seznamu jeho tříd. Jak na to, se naučíte v dalším cvičení.