Preflight

Warum sieht die Überschrift wie normaler Text aus, und warum hat die Liste ihre Aufzählungspunkte verloren? Jeder Browser hat eigene eingebaute Stile: Überschriften sind groß und fett, Absätze und Listen haben Abstände, Listen haben Aufzählungspunkte, und Links sind blau und unterstrichen. Jeder Browser macht das ein wenig anders, und beim Gestalten einer Seite stolperst du ständig darüber: hier ein Abstand, den du nie verlangt hast, dort eine Größe, die du nicht gewählt hast.

Darum wendet Tailwind vor allen deinen Klassen eigene Basisstile an, Preflight genannt, die die eingebauten Stile des Browsers entfernen. Hier ist ein Ausschnitt:

*,
::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;
}

Die erste Regel kommt dir vielleicht bekannt vor: Stylesheets im CSS-Kurs begannen oft mit einer ähnlichen. Der Wert inherit bedeutet, dass das Element den Wert von seinem Elternelement übernimmt, eine Überschrift hat also dieselbe Größe und Stärke wie der Text um sie herum. Und list-style: none entfernt die Aufzählungspunkte.

Dank Preflight sieht ein Element in jedem Browser nur so aus, wie es deine Klassen vorgeben. Überschriften und Listen bedeuten weiterhin dasselbe (für Suchmaschinen und Screenreader bleibt eine Überschrift eine Überschrift), sie sehen nur nicht so aus, bis du sie gestaltest. Darum ist auf unserer Seite auch alles zusammengequetscht: Nichts hat Abstände. Die fügst du in der Lektion über Abstände und Größen hinzu.

Geben wir der Überschrift also eine Größe. Die Klasse text-3xl setzt die Schriftgröße auf 1.875rem (30 px), zusammen mit einer passenden Zeilenhöhe:

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

(Tailwinds echtes CSS verwendet statt dieser Zahlen Variablen, aber das Ergebnis ist dasselbe.) Das 3xl im Namen ist eine Größe wie bei Kleidung: Tailwind hat eine ganze Skala davon, von text-xs bis text-9xl, und du lernst sie in der nächsten Lektion kennen.

Für die Aufzählungspunkte brauchst du zwei Klassen:

• list-disc ist list-style-type: disc: Die Einträge bekommen Aufzählungspunkte in Form eines ausgefüllten Kreises, einer Scheibe (englisch disc).
• list-inside ist list-style-position: inside: Der Aufzählungspunkt steht innerhalb des Eintrags, vor seinem Text. Ohne die Klasse hängt er außerhalb des Eintrags, links davon, in dem Platz, den das padding der Liste dafür schafft. Preflight hat dieses Padding entfernt, ein Punkt außerhalb des Eintrags würde also links über den Seitenrand hinausragen, wo du ihn nicht sehen kannst.