When a Class Does Nothing

We've added three more classes to the page, so that the whole page is centered and the link stands out: text-center to the list and to the paragraph with the link, and font-bold to the link. Or at least we tried. Look at the preview: the list is still on the left, and the link isn't bold. We made a typo in two of the classes, and nothing tells you so.

That's how Tailwind works: a misspelled class gives no error, it just does nothing. Tailwind writes CSS only for whole class names it knows. A word like text-cetner isn't one of them, so Tailwind skips it, and a class without any CSS does nothing, just like a class that no rule in your stylesheet selects. Tailwind can't warn you, because the class attribute may also hold classes that aren't meant for Tailwind at all, such as your own.

When a class seems not to work:

• Check its spelling, letter by letter. text-cetner and text-center look alike at a glance.
• Check that it's inside the quotes of the class attribute, and that the element has only one class attribute.
• Look it up in the documentation. Maybe the class has a different name than you think.

Mistakes in style.css are different. Tailwind reads the whole file, and when it finds something it can't understand, it doesn't make any CSS at all. The page loses all its Tailwind styles, and a red message under the preview says what's wrong. For example, if style.css had a rule without its closing curly brace:

@import "tailwindcss";

h1 {
	letter-spacing: 2px;

you would see this message:

style.css: Missing closing } at h1

You can try it: add the line h1 { at the end of style.css and click Run. Then delete the line again.

There's one exception: the @import line itself. If you misspell it, for example as @import "tailwind";, the site doesn't recognize it as Tailwind, and the page shows up without Tailwind and without any message, like when we emptied style.css. So if the whole page suddenly looks like plain HTML with the browser's built-in styles, check that line first.