When I first got into contact with Tailwind CSS, I was slicing websites where I would use the Block, Element and Modifier (BEM) methodology together w

I changed my mind about Tailwind CSS

submited by

Style Pass

2021-09-24 18:30:05

When I first got into contact with Tailwind CSS, I was slicing websites where I would use the Block, Element and Modifier (BEM) methodology together with Sass. This system suited my needs and provided ways to make a component reusable and structured. Reading through my code when everything was sliced felt clean and readable. When I read the docs from Tailwind CSS I thought it was more for people who didn't know CSS that well, it looked messy.

Don't worry, this article isn't going burn BEM to the ground. It still has its advantages and provides readable code. However, if you're using BEM, you've probably been stuck numerous times trying to come up with good names for your component classes. With time and experience it becomes easier as you know how to name things, but it can be annoying sometimes.

So what's the deal with Tailwind CSS and why did I change my mind? It all changed when I started to code websites in Next.js, which uses React. Before, my components were just simple snippets of how a component would look like. I would list these components on a separate page and then copy paste them to where they were needed and change the data that was printed.