Tailwind

The problem

CSS is powerful, and you've probably already noticed how much we rely on it for both webpages and charts.

But you've also probably felt how painful it can be to write and maintain CSS files. It's frustrating for three main reasons:

❌ Verbose and time-consuming — every React component needs its own CSS file. You end up writing a lot of boilerplate just to set a font size or a margin.

❌ Constant context switching — your markup lives in one file, your styles in another. You're constantly jumping back and forth, hunting for the right class name.

❌ No design system — with a blank CSS file, every spacing and color choice is up to you. Should that margin be 3px or 4px? Should the font size be 17px or 18px? Without constraints, inconsistency creeps in fast.

Tailwind to the rescue

Tailwind CSS is a utility-first framework: instead of writing custom CSS, you apply small, predefined classes directly in your markup.

Here's a simple example. With plain CSS, you define a .warning class in a separate file, then apply it to a div:

/* styles.css */
.warning {
  background-color: orange;
}

<!-- index.html -->
<div class="warning">Warning!</div>

This works perfectly fine. But with Tailwind, you skip the CSS file entirely:

<div className="bg-orange-400">
  Warning!
</div>

The class bg-orange-400 is a predefined Tailwind utility that sets the background color.

That's it! No CSS file, no class naming. Everything stays in your JSX.

Here's a more realistic comparison. Switch between the two tabs to see how the same card looks with plain CSS versus Tailwind:

<link rel="stylesheet" href="styles.css" />

<div class="card">
  <h3 class="card-title">Revenue</h3>
  <p class="card-value">$12,340</p>
  <p class="card-label">+12% from last month</p>
</div>

Same result, but the Tailwind version has no CSS file at all. Now let's revisit those three pain points:

✅ Concise — no separate file, no verbose property declarations. A few class names and you're done.

✅ Co-located — styles live right next to the markup they affect. No more jumping between files.

✅ Built-in design system — Tailwind's spacing scale ( p-1, p-2, p-4...), color palette, and font sizes give you consistent, harmonious defaults out of the box.

Most useful classes

Tailwind has hundreds of utility classes, but you'll use the same ones over and over. Open each category below to see the most common ones in action:

You don't need to memorize all of these! The Tailwind documentation is excellent — just search for a CSS property and you'll find the matching class instantly.

Even more features

→ Responsive design

Tailwind makes responsive layouts easy with breakpoint prefixes. Want a single column on mobile and three columns on desktop? Just add a prefix:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  ...
</div>

md: means "from medium screens and up" and lg: means "from large screens and up." No media queries needed!

→ Hover & state variants

Adding hover effects, focus rings, or active states works the same way — just prefix the class:

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

→ VS Code extension

The Tailwind CSS IntelliSense extension for VS Code is a must-have. It autocompletes class names, shows the underlying CSS on hover, and catches typos. It makes the learning curve much smoother.

→ Pairs perfectly with Shadcn/UI

Shadcn/UI is a component library built on top of Tailwind. It provides beautifully designed buttons, dialogs, tabs, and more — all customizable with Tailwind classes. We use it throughout this course, and it has its own dedicated bonus lesson.

Live demo

Let me walk you through setting up Tailwind in a new project, the files it creates, and how to organize everything:

A word of caution

Tailwind is opinionated and not universally loved. Some developers find the long class strings harder to read than traditional CSS, and that's a valid point.