As we saw above, we write the utility class names straight in our HTML. A thought that comes to mind right away is that this looks a lot like inline CSS (which is probably the reason the Tailwind developers address this on one of the first pages in the documentation).
And although they try to argue that it’s not bad because of all the advantages Tailwind gives you (which is true by itself, I agree) I’m not convinced. I don’t want to pollute my HTML syntax with a large collection of class names for each HTML element. I don’t want to look at this every day:
Now mind this: The example above comes from the Tailwind documentation and it renders a simple card. And it does so beautifully, indeed. It’s even responsive. But depending on your everyday tasks, this quickly escalates: What if I work on creating a component that is more complex than a simple card? What if I have to respect a certain design, created by the designers, with all its little quirks?
I tried doing so. And what happened is not unexpected. Your HTML elements get a lot of Tailwind utility class names each. As in, a lot. This is not something you’ll see in their documentation. And not on social media either. But it’s a reality for a lot of us when we start working on larger applications:
This is what will happen in practice.
The example above is not exaggerated. I even dare to call it a minimal example — at least in applications that have certain requirements and designs (responsiveness and style adjustments based on different screen sizes).
So how do we organize these class names? Perhaps we have to create and respect conventions for their order. I would find that cumbersome. The alternative is that we allow template designers and developers to use any particular order they want. This would result in us having to scan horizontally — perhaps even scroll — in order to find class names that we’re trying to change.
I don’t want to “Where’s Wally?” the font-size of my element.
My point is, some HTML elements can have so much styling applied to them that they perhaps should be separated from the HTML markup, by default. In their own files. So that we can organize it, and make it readable. You cannot pack all the power of CSS in one HTML-attribute called class. Not with Tailwind either. It quickly becomes too much.