Preflight

Proč nadpis vypadá jako obyčejný text a proč seznam přišel o odrážky? Každý prohlížeč má vlastní vestavěné styly: nadpisy jsou velké a tučné, odstavce a seznamy mají okraje, seznamy mají odrážky a odkazy jsou modré a podtržené. Každý prohlížeč to dělá trochu jinak, a když stránku stylujete, pořád o ně zakopáváte: tady okraj, o který jste nestáli, tam velikost, kterou jste nevybrali.

Proto Tailwind ještě před všemi vašimi třídami použije vlastní základní styly, kterým se říká Preflight (anglicky předletová příprava). Preflight vestavěné styly prohlížeče odstraní. Tady je jeho část:

*,
::before,
::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
}

ol, ul {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: inherit;
}

První pravidlo vám může být povědomé: podobným pravidlem často začínaly soubory se styly v kurzu CSS. Hodnota inherit znamená, že prvek převezme hodnotu od svého rodiče, takže nadpis má stejnou velikost a tloušťku písma jako text kolem něj. A list-style: none odstraní odrážky.

Díky Preflightu vypadá prvek v každém prohlížeči jen tak, jak říkají vaše třídy. Nadpisy a seznamy přitom znamenají totéž co dřív (pro vyhledávače i čtečky obrazovky je nadpis pořád nadpis), jen tak nevypadají, dokud jim vzhled nedáte. Proto je také všechno na naší stránce natěsno u sebe: nic nemá okraje. Mezery přidáte v lekci o mezerách a rozměrech.

Dejme tedy nadpisu velikost. Třída text-3xl nastaví velikost písma na 1.875rem (30 px) a k ní odpovídající výšku řádku:

.text-3xl {
	font-size: 1.875rem; /* 30 px */
	line-height: 2.25rem; /* 36 px */
}

(Skutečné CSS Tailwindu místo těchto čísel používá proměnné, výsledek je ale stejný.) Označení 3xl v názvu je velikost jako u oblečení. Tailwind má celou škálu takových velikostí, od text-xs po text-9xl, a poznáte ji v příští lekci.

Na odrážky jsou potřeba dvě třídy:

• list-disc je list-style-type: disc: položky dostanou odrážky ve tvaru plného kolečka (anglicky disc, kotouč).
• list-inside je list-style-position: inside: odrážka je uvnitř položky, před jejím textem. Bez této třídy visí odrážka mimo položku, vlevo od ní, v místě, které pro ni vytváří polstrování (padding) seznamu. To ale Preflight odstranil, takže odrážka mimo položku by skončila za levým krajem stránky, kde ji neuvidíte.