Tailwind CSS has become one of the most popular utility-first CSS frameworks in the web development ecosystem. But also one of the most controversial.

In this blog part, I'll dive into the pros and cons of using Tailwind CSS in 2025. I'll also share my experience with Tailwind CSS and why I think you should use it in your next project.

We're actually migrating Magic Patterns to Tailwind CSS, and I'll share why now below.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your HTML/JSX. Instead of writing traditional CSS with class names like .button or .card, you apply pre-built utility classes directly to your elements.

Take this simple Button component.

const RegularButton = ({ children }) => {
  return (
    <button
      style={{
        backgroundColor: '#3b82f6',
        color: 'white',
        padding: '0.5rem',
        borderRadius: '0.375rem',
      }}
    >
      {children}
    </button>
  )
}

Here is what this same Button component looks like with Tailwind.

const TailwindButton = ({ children }) => {
  return (
    <button className="bg-blue-500 text-white p-2 rounded-md">
        {children}
    </button>
  )
}

My Experience with Tailwind

I've used Tailwind CSS occasionally over the years. I've used it in a few projects, but it candidly I've never felt more than indifferent about it.

Given I'm already fluent in CSS, the barrier towards getting familiar with Tailwind was enough for me to never seriously pick it up.

As I've started to work with it more and more, I've started to appreciate it more and more. Here are some things that I appreciate about Tailwind over CSS-in-JS (my preferred method of writing styling)

1. Pseudo-classes. Tailwind has a very convenient syntax for writing pseudo-classes that is otherwise impossible in plain CSS-in-JS. Hover effects for example are a breeze with Tailwind.
2. tailwind.config.js. The ability to easily create CSS variables and create your own utility classes is amazing.
3. Responsive design. With Tailwind, you can easily create responsive designs without having to write media queries.

The Deciding Factor: AI

I mentioned above that at Magic Patterns, we're migrating our codebase to Tailwind. And it's not because we all of a sudden decided that we love Tailwind's utility classes.

The main reason why we're migrating to Tailwind is because of AI.

Take a look at the examples below created by Magic Patterns.

While the CSS-in-JS examples are not bad, they are clearly not as rich and well designed as the Tailwind examples.

As we use AI to write more and more of our code, it's become clear to us that using Tailwind gives us the most leverage and best results.

We now use Magic Patterns to design and build our frontend components. Because Magic Patterns generates Tailwind, we can iterate inside of Magic Patterns and then directly use the code in our codebase.

Should you use Tailwind in 2025?

Yes. If you starting a project from scratch, I highly recommend using Tailwind so that you can take maximum advantage of AI.

But one thing is clear to us at Magic Patterns: AI is here to stay, and AI will only get better at generating Tailwind code.