I like straightforward solutions when it comes to programming. Nowadays there are dozens of solutions for writing CSS in your application like “Module-based CSS”, “CSS-in-JS” etc. That’s where Tailwind comes to the rescue for me. Tailwind is a utility-first CSS framework packed with dozens of pre-built classes like “pt-4 w-4 text-black”.
A couple of months ago I was told that I will start working on a new project. I love to work with React and I choose NextJS because we needed some SSR capabilities and optimizations for the website. While I was searching I narrowed down the options to 3. The default option was writing module-based CSS which NextJS directly supports. But I wanted something more, before researching I had some options and I was planning to choose between a CSS-in-JS solution like styled-components or a utility framework like Tailwind.
My first stop was CSS-in-JS. I used to read articles about this approach and it seemed like an expert solution. I would really want to give it a try but as I dive deeper I felt the pressure of complexity. And even if I choose styled-components it would be better to add helpers like styled-system and styled-tools. It would be good to try something new but I didn’t want to jump into this solution for this project. I felt like it would be overkill.
I confess that I had a tendency for using Tailwind but I didn’t want to come to a conclusion without doing some research. In the end, the problems I will have with my decision would affect me in greater altitudes.
The reason I like Tailwind is because it’s straightforward. I get what I write for and that is plain old class names. The problem about this is the html output you get after adding loads of classes.
Writing css like this feels like I’m totally in control. I know that there won’t be any unused css code and even if I change something in a component I know that it would only affect that part. Adding conditional classes are also perfectly simple with the help of classnames library.
I’m generally using VS Code as IDE and there is a great helper for intellisense the Tailwind classes even with the user generated ones.
The most problematic part of Tailwind is the crowded html file that hurts the eye. But there is a solution for that. With the help of @apply you can extract the part that you feel like you can reuse.
Built-in Tailwind classes are enough but extending tailwind is simple with it’s own config file. For example I did not find breakpoints enough so I changed them as for my needs. The best part is VS Code recognises my custom classes.
I encountered 3 problems with Tailwind.
The first one is the learning curve. I find myself looking at the documentation frequently about the class names.
The second one is even if you get a CSS file that contains only the necessary and used classes you load all of the styles at once. With a solution like CSS-modules or CSS-in-JS, you can load the styles that are used in that particular component or page.
The third problem is about having dynamic background images. Once I needed to use inline arbitrary background-image property in Tailwind but in a dynamic way. But Tailwind compiles every class or value that is used beforehand so my dynamic background images did not work so I had to write custom classes for every image in my styles.scss as a workaround.
I know that Tailwind is not the best solution for writing CSS but for me it gives me confidence and power over the styles. As a developer, I know that the ecosystem is changing and evolving rapidly so I don’t know for how long but I am and will be using it as my first choice for writing styles for a while.
Follow me on Instagram, Facebook or Twitter if you like to keep posted about tutorials, tips and experiences from my side.
You can support me from Patreon, Github Sponsors, Ko-fi or Buy me a coffee
