You probably know the feeling: A new project is about to start and the first big question is – how do I style this thing? Write classic CSS, the way we have known it for years? Or go with Tailwind CSS, which seemingly every other developer swears by? Spoiler: Both approaches have their place. But when is which actually worth it? That is exactly what we are going to figure out here. 💪

TL;DR: Tailwind CSS is perfect for rapid prototyping and team-wide consistency. Vanilla CSS shines when you need full control, for small projects, and with component frameworks that have scoped styles. The best solution? Often a mix of both.

What Is Vanilla CSS Anyway? 🍦

By Vanilla CSS, I mean plain, native CSS – no frameworks, no utility classes, no build tools. You write your own classes, define your layout, your spacing, your colors. Everything by hand. That might sound old-school, but it has solid advantages:

• Full control: You decide on every single line.
• No overhead: No additional dependency, no build step required.
• Learning effect: You truly understand what is happening.
• Small bundles: If you work cleanly, only what you actually need ends up in your CSS.

Especially with modern features like CSS Custom Properties, Container Queries, CSS Grid, and :has(), native CSS has become extremely powerful. Many things that used to require a framework can now be done natively.

CSS variables: Flexible styling for your components 🎨

CSS variables make your styling more flexible 🎯 In this guide, I'll explain how to use, scope and override them in components! 🌈

Disane.dev - Tech blogMarco Franke

What Does Tailwind CSS Do Differently? 🌬️

Tailwind CSS is a utility-first CSS framework. Instead of writing your own classes, you combine predefined utility classes directly in your HTML:

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click me
</button>

At first glance, that looks chaotic, but it has its charm:

• Fast development: You do not have to invent class names or switch between files.
• Consistency: The design system is built-in – spacing, colors, breakpoints are predefined.
• No dead CSS: Tailwind automatically removes unused CSS (PurgeCSS).
• Rapid prototyping: For quick prototypes, Tailwind is hard to beat.

Tailwind CSS: CSS framework for Kickstart

Discover the future of web design with Tailwind CSS! Efficient, flexible and perfect for beginners and professionals. 🚀

Disane.dev - Tech blogMarco Franke

Head-to-Head Comparison 🔍

Let us look at a simple card component in both variants.

Vanilla CSS:

<div class="card">
  <h3 class="card-title">Title</h3>
  <p class="card-text">Description</p>
</div>

.card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card-text {
  color: #666;
  line-height: 1.6;
}

Tailwind CSS:

<div class="bg-white rounded-lg p-6 shadow-md">
  <h3 class="text-xl font-bold mb-2">Title</h3>
  <p class="text-gray-500 leading-relaxed">Description</p>
</div>

Immediately noticeable: With Tailwind, you do not need a separate CSS file. Everything happens directly in the markup. That is both its strength and its weakness.

When Is Vanilla CSS Worth It? ✅

• Small projects without a build pipeline
• When you need full control over your CSS
• With component frameworks that have scoped styles (Angular, Vue, Svelte)
• When you want to fully leverage CSS variables and modern features
• Projects where semantic class names matter (accessibility!)

ARIA attributes in HTML: A comprehensive guide 🌐

Learn how ARIA attributes improve accessibility in HTML and how you can use them effectively in your projects 🥸

Disane.dev - Tech blogMarco Franke

When Is Tailwind CSS Worth It? 🚀

• Rapid prototyping and quick MVPs
• Teams that need a consistent design system
• React/Next.js projects where Tailwind integrates well
• When you do not want to deal with CSS naming conventions (BEM, SMACSS, ...)
• Large teams where consistency is more important than individuality

Why CSS Flexbox can solve your layout problems🧑‍💻

Learn how Flexbox can revolutionize your web design and why it's better than old layout methods! Perfect for responsive designs 🎨

Disane.dev - Tech blogMarco Franke

The Downsides Nobody Mentions ⚠️

Tailwind:

• Your HTML becomes extremely long and cluttered with complex components.
• You are locked into the Tailwind ecosystem – migration is costly.
• Custom designs outside the default system require a lot of config work.
• Dynamic styling at runtime? Not so easy.

Vanilla CSS:

• In large projects, CSS can quickly become hard to maintain.
• Naming is hard – after 50 components, you run out of good names.
• Without conventions like BEM, you will end up with spaghetti CSS.
• Finding and removing dead CSS is tedious.

Size specifications in CSS: A developer's joys and sorrows 🎨

A comprehensive guide to the different sizing units in CSS and their applications. Learn the pros and cons and improve your design! 🎨

Disane.dev - Tech blogMarco Franke

My Verdict 🎯

There is no "better" or "worse". It depends on your project and your team. Personally, I like using Vanilla CSS with Custom Properties for projects where I need full control – especially in Angular with scoped styles, it just makes sense.

For quick prototypes or when working with a team that needs a unified system, I go with Tailwind. It saves time, and the built-in consistency is worth its weight in gold.

My tip: Learn both! If you understand native CSS, you can use Tailwind more effectively – and vice versa. And maybe the best solution is a mix of both. 😉

Here are some useful resources: Tailwind CSS Docs, MDN: CSS Custom Properties and MDN: CSS Grid Layout.

What about you? Team Tailwind or Team Vanilla? Let me know in the comments! 👇