As a web developer, I’ve spent countless hours carefully writing CSS. I’ve named and renamed many classes as my code increased to prevent styling problems in a large codebase. Several times, I had that frustrating experience that even after writing my CSS in that careful way I am still getting some unintended frontend results, and then I have to hunt for those overriding styling classes. For years, this was just the cost of doing business. Traditional CSS is powerful, essential, and… often a source of massive headaches on larger projects.
But, then, I fully embraced Tailwind CSS, and my entire development workflow changed.
This isn’t just about exploring some new tech on the web. This is a practical breakdown about why I’ve moved almost exclusively to a utility-first approach for my projects and why you should seriously consider it too.
A Quick Look at Traditional CSS
Let’s be clear: you must know CSS to be a web developer. It’s the foundation. The ability to take a blank slate and style it with pure CSS is a core skill. Even if we use Tailwind, when it comes to the browser, it’s converted to CSS again. So, the problem isn’t with CSS itself, but with how we manage it when we have a large codebase.
With traditional CSS (or SASS/SCSS), the our frontend development process is something like:
- Write your HTML structure.
- Switch to your .css or .scss file.
- Think about a class name that’s self explanatory and logical (e.g., .profile-card__button–primary).
- Write a block of styles for that class.
- Go back to your HTML to make sure you used the right class name.
- If any changes are needed, go back to the CSS file to create a new modifier class.
This constant switching between files, creates significant mental drag. More importantly, it leads to common pain points:
- Larger Files: CSS files grow much bigger, containing classes that you don’t even remember.
- Naming Problem: Every time you write a new class, it should be a meaningful, consistent, and conflict-free name, which breaks that productive flow of a developer.
- Fear of Deletion: When you have a large codebase, then you can’t simply delete any CSS class because it can break your frontend design.
- Challenges in Codebase Understanding: When you are working with a codebase developed by someone else, you have to examine the styles defined in stylesheets. This is because the naming conventions and implementation choices of previous developers can be unpredictable, and require a thorough review of existing code blocks to understand their styling.
Entering Tailwind CSS
Tailwind isn’t like Bootstrap which is a component library. It doesn’t give you pre-built buttons and cards. Instead, it provides you with a complete set of atomic-level utility classes that write directly in your HTML.
Let’s look at a simple button.
Using Traditional CSS:
Your HTML:
<button class="btn-primary">Click Me</button>Your CSS:
.btn-primary {
background-color: #3b82f6;
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.btn-primary:hover {
background-color: #2563eb;
}Using Tailwind CSS:
Your HTML is all you need:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md">
Click Me
</button>At first glance, Tailwind CSS with HTML looks messy. When I started learning Tailwind, I thought so too. But once I started building with it, I almost never used pure CSS in any of my new projects.
My Core Reasons for Making the Switch
Following are the benefits that accelerated my development and improved the quality of my work.
1. Development Speed and Focus
The single biggest thing is that I don’t need to switch between files. I stay in my HTML file (or my JSX/Vue component) and build. I’m not jumping between files, I’m not brainstorming to invent and new class name each time. I’m simply describing what the element should look like. This laser focus on development has easily doubled my styling speed.
2. No Need to think about Class Names
It saved me half of my time and energy which was wasted in naming classes. Now I don’t have to think about whether a component should be called author-bio or user-profile-card. If I need a div element with a flexbox layout, a gray background, and rounded corners. Just add flex bg-gray-100 rounded-lg. That’s the power of Tailwind.
3. Consistency and Design Systems by Default
Tailwind is built on a design system which is consistent and can be configured. The spacing units like padding, margins (p-4, m-6), colors (text-zinc-800, bg-sky-500), and font sizes (text-lg, text-2xl) are all predefined. This brings consistency across the entire project. It stops developers from adding a random number of pixels like margin-top: 13px;. As the entire UI is built from the same consistent palette, it becomes a more professional and cohesive final product.
4. Performance Benefits
Mostly people think Tailwind results in a bloated HTML. While that’s not the case, your HTML file might be larger during development, but the final production CSS is small. It has a built in JIT compiler, that scans your files for every class you’ve used and generates a CSS file containing only those styles.
My last major project had a final CSS file size of just 12KB. A traditional CSS approach for a project of that scale would have easily been 100KB or more.
When to Stick with CSS
I love Tailwind, but a good developer always picks the best tool for the job. Sometimes it’s not the best one to choose.
- For Absolute Beginners: If you’re just starting your web development journey, then you should master CSS first. Understanding at least some basic concepts of CSS like the box model,Flexbox and Grid. Tailwind is made on CSS; so you must understand what it’s abstracting. For students and newcomers, a strong foundation in vanilla CSS is non-negotiable.
- For Small Projects: If you’re making a small website or a site with a lot of animations, then it’s better to use Vanilla CSS because it gives you more control over styling.
Conclusion
The debate of Tailwind CSS vs. vanilla CSS isn’t about which one is better. It’s about which one gives you power to build better, faster, and more maintainable websites.
For me, Tailwind is a blessing. Removing the most frustrating parts of CSS management it let’s me focus on building some great user interfaces.