Preflight

Why does the heading look like ordinary text, and why did the list lose its bullets? Every browser has its own built-in styles: headings are big and bold, paragraphs and lists have margins, lists have bullets, and links are blue and underlined. Each browser does it a little differently, and when you style a page, you keep running into them: here a margin you never asked for, there a size you didn't choose.

That's why, before any of your classes, Tailwind applies its own base styles, called Preflight, which remove the browser's built-in styles. Here's a part of them:

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

The first rule may look familiar: stylesheets in the CSS course often started with a similar one. The value inherit means that the element takes the value from its parent, so a heading has the same size and weight as the text around it. And list-style: none removes the bullets.

Thanks to Preflight, an element looks only the way your classes say, in every browser. Headings and lists still mean the same as before (for search engines and screen readers, a heading is still a heading); they just don't look like it until you style them. That's also why everything on our page is squeezed together: nothing has margins. You'll add space in the lesson on spacing and sizing.

So let's give the heading a size. The class text-3xl sets the font size to 1.875rem (30 px), together with a matching line height:

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

(Tailwind's real CSS uses variables instead of these numbers, but the result is the same.) The 3xl in the name is a size, like on clothes: Tailwind has a whole scale of them, from text-xs to text-9xl, and you'll get to know it in the next lesson.

The bullets need two classes:

• list-disc is list-style-type: disc: the items get bullets in the shape of a filled circle, a disc.
• list-inside is list-style-position: inside: the bullet is inside the item, in front of its text. Without it, the bullet hangs outside the item, to the left of it, in the space that the list's padding makes for it. Preflight took that padding away, so a bullet outside the item would end up beyond the left edge of the page, where you can't see it.