When I started learning CSS, I wrote everything the traditional way: expressive class names, separate CSS files, and each class had specific properties. I felt this was the correct and most organized approach. But as projects grew, I found myself writing more CSS than actual code. Tailwind CSS completely changed that approach, and in this article, I'll tell you how and why.
The first thing I noticed with Tailwind was speed. Instead of opening a CSS file, writing a new class, and then going to add it in the HTML, I now write everything in one place. In Esma3 Radio, the homepage needed a complex design: station cards, audio player, Quran section. With traditional CSS, styling alone would have taken two days. With Tailwind, I finished in half a day.
The comparison between Tailwind and traditional CSS isn't just a matter of personal preference. In traditional CSS, every new class increases the file size, and there's a lot of repetition. In Tailwind, utilities are reused everywhere, and PurgeCSS removes unused ones. The result: a much smaller CSS file. In the Elmokhber project, the final CSS file was under 10KB compared to 50KB with the traditional approach.
Customization in Tailwind was a turning point. The tailwind.config file lets you control everything: colors, spacing, fonts, breakpoints. In the Tammeny app, I added a special brand color (green for security) and used it everywhere easily. If I wanted to change it, I change it in one place only. This is virtually impossible with traditional CSS without preprocessors like SASS.
Responsive Design with Tailwind is a completely different experience. Instead of writing separate media queries, I write prefixes directly: sm:, md:, lg:, xl:. In Esma3 Radio, station cards show 2 columns on mobile, 3 on tablet, and 4 on desktop. The code is clear and readable in one place: grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4.
Dark Mode with Tailwind is extremely simple. The dark: prefix before any utility makes it apply only in dark mode. In the Weather App, dark mode was essential since people use it at different times of day. All I did was add dark: before colors and backgrounds, and it was done. With traditional CSS, I would have needed separate media queries for each element.
The biggest criticism of Tailwind is that HTML becomes full of classes and hard to read. This is true initially. But over time, you learn to organize classes: first basics (display, position), then dimensions (width, height, padding), then colors and borders, and finally interactions (hover, focus). Component extraction also solves this problem — when an element repeats, you make it a separate component.
A real example from Battle of Questions: the question card repeated every round. Instead of writing classes every time, I made a QuestionCard component and used it everywhere. The long classes ended up in one place only, and usage became clean and readable.
My advice: if you haven't tried Tailwind yet, start with a small project. You'll be frustrated at first by how the code looks, but after a week you'll find yourself much faster. Use the Tailwind VS Code Extension for autocomplete — it's life-changing. And most importantly, learn to organize your classes so the code stays readable.
Top comments (0)