Když třída nic nedělá

Přidali jsme na stránku další tři třídy, aby byla celá zarovnaná na střed a odkaz byl výraznější: text-center seznamu a odstavci s odkazem a font-bold odkazu. Tedy, aspoň jsme se o to pokusili. Podívejte se do náhledu: seznam je pořád vlevo a odkaz není tučný. Ve dvou třídách jsme udělali překlep a nic vás na to neupozorní.

Tak to v Tailwindu chodí: u třídy s překlepem se žádná chyba neobjeví, třída prostě nic nedělá. Tailwind píše CSS jen pro celé názvy tříd, které zná. Slovo text-cetner mezi ně nepatří, a tak ho Tailwind přeskočí. Prohlížeč pak třídu bez CSS ignoruje, stejně jako v kurzu CSS třídu, kterou nevybíralo žádné pravidlo. Tailwind vás upozornit nemůže, protože v atributu class mohou být i třídy, které pro Tailwind vůbec nejsou, třeba vaše vlastní.

Když se zdá, že třída nefunguje:

• Zkontrolujte, jak je napsaná, písmeno po písmenu. text-cetner a text-center vypadají na první pohled stejně.
• Zkontrolujte, že je uvnitř uvozovek atributu class a že prvek má jen jeden atribut class.
• Vyhledejte si ji v dokumentaci. Možná se třída jmenuje jinak, než si myslíte.

S chybami v souboru style.css je to jinak. Tailwind čte celý soubor, a když narazí na něco, čemu nerozumí, nevytvoří vůbec žádné CSS. Stránka přijde o všechny styly z Tailwindu a pod náhledem se červeně objeví zpráva, co je špatně. Kdyby například v style.css bylo pravidlo bez zavírací složené závorky:

@import "tailwindcss";

h1 {
	letter-spacing: 2px;

uviděli byste tuto zprávu:

style.css: Missing closing } at h1

Zprávy Tailwindu jsou anglicky. Tahle říká, že u pravidla pro h1 chybí zavírací složená závorka. Můžete si to vyzkoušet: na konec style.css přidejte řádek h1 { a klikněte na Spustit. Pak řádek zase smažte.

Výjimkou je samotný řádek s @import. Když v něm uděláte překlep, třeba @import "tailwind";, náš web v něm Tailwind nepozná a stránka se zobrazí bez Tailwindu a bez jakékoli zprávy, jako když jsme vyprázdnili style.css. Pokud tedy celá stránka najednou vypadá jako obyčejné HTML s vestavěnými styly prohlížeče, zkontrolujte nejdřív tenhle řádek.