DEV Community

Charlie Joel
Charlie Joel

Posted on • Originally published at charliejoel.dev

1

Don't mix Tailwind with CSS

Tailwind is the new kid on the block; it's fast, it's got a tiny footprint, and it encourages a new way of working in component-based architectures. That being said, it gets a lot of hate in the Frontend community and it's easy to see why.

The problem

Followers of traditional HTML-CSS-JS workflows complain that it works against the principles we have all followed for the past 10-20 years of web development. Keeping all your styles in one place makes sense, and makes life much easier when it comes to maintaining a frontend. If you use a methodology like BEM, you can understand where the styles for a component will be just by reading the class name.

When we add Tailwind into a traditional frontend, every one of these principles goes straight out the window. Styling is no longer confined to one area or file type - it's split between CSS, HTML and sometimes even JavaScript. We might change a CSS property, only to realise there's a Tailwind class that overrides it completely. All of this leads to a mess that is difficult to understand and maintain. The choice between the two approaches should be either-or: No mixing Tailwind with CSS.

So it Tailwind actually bad?

Tailwind, just like regular CSS, can work beautifully if used correctly. As is often the case with styles, the issues start to appear in droves as soon as we misuse the technology and ignore the rules that keep developers sane. Poorly written CSS is just as confusing as misused Tailwind.

This technology is still in it's early stages, but I'm a huge advocate for Tailwind and have used it in quite a few different projects. I've written more about why it's so good, and particularly how to use it, in my other articles:

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (1)

Collapse
 
kaodik profile image
kao

Thank you for the heads up. I am preparing to learn Tailwind. Now I am a little bit more informed.

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →