The Tailwind CSS Drama Your Users Don't Care About

Cons: - Mixes the ol’ separation of concerns — styles with markup. - It bloats HTML markup and looks like inline styles === ugly. Tip: if what bothers you in Tailwind is the “ugliness” inside your HTML, you can use the Inline Fold VScode extension. ### Verbosity CSS is very verbose, meaning you need to write a lot of characters to define each property. Also, there are things that might need a few properties to achieve something relatively simple. When you write pure CSS, you write a lot of code. Pros: - Everything in Tailwind is just CSS. ... - Writing with Tailwind results in less code. ... - One Tailwind site/app can look completely different than another. - Easy to refactor. Cons: - You need to wire up custom CSS that might not be mapped to a TW utility class. - Tailwind is a non-standard way to use CSS. ### Zombie styles Unused CSS can bloat up your website or app. There’s nothing to stop you from writing the same style properties in different classes or selectors. Styles that aren’t used are still shipped to the browser but have no effect, they just hang around your codebase like zombies 🧟‍♂️. Pros: - Tailwind purges any styles (and zombies) that aren’t used. … “One issue for me with Tailwind-like solutions is that they 'confuse' Utility-Classes with Design Tokens, and unnecessarily bind them together. Design Tokens are great, we should absolutely use them, and it's very(!) easy to do with CSS custom properties. Utility Classes are also great, and we should use them too - for utility purposes. Mapping tokens to classes goes against every basic CSS principle and is quite redundant once you're working with a good set of tokens and a few basic useful utility classes.”