What is Tailwind CSS

If you've ever written CSS, you've probably been there: tweaking a one-pixel margin for half an hour, staring at the screen for five minutes trying to name a class, or hunting through an entire stylesheet just to override a framework's default styles… Tailwind CSS exists to solve these problems. It's not another Bootstrap — it's a completely new way to write CSS.

1. What is Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Its core idea: apply pre-defined classes directly in your HTML to control styles, rather than writing custom CSS.

Let's see a direct comparison — putting a blue button on a page:

Example: Traditional CSS vs Tailwind (Difficulty ⭐)

Traditional CSS:

HTML

<style>
.btn-primary {
  background-color: #2563eb;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
.btn-primary:hover {
  background-color: #1d4ed8;
}
</style>
<button class="btn-primary">Click me</button>

▶ Try it Yourself

Tailwind:

Example: Tailwind approach (Difficulty ⭐)

HTML

<button class="bg-blue-600 text-white px-6 py-3 rounded-lg text-base cursor-pointer hover:bg-blue-700">
  Click me
</button>

▶ Try it Yourself

Try the Tailwind code above in the editor below to see the result.

See the difference? With Tailwind, you never leave your HTML. All styles are composed through classes — bg-blue-600 is a blue background, px-6 is horizontal padding, rounded-lg is a large border radius, and hover:bg-blue-700 darkens the color on hover.

💡 What does "Utility-First" mean? Simply put, CSS properties are broken down into the smallest possible atomic classes. bg-blue-600 does one thing — sets the background color to blue. text-white does one thing — sets the text color to white. You combine the classes you need, like building with blocks.

2. Tailwind vs Traditional Frameworks

vs Bootstrap

Bootstrap is a component-based framework — it provides pre-designed components (buttons, navbars, cards, forms) that you invoke with a fixed HTML structure. The problem: if you want to customize the look, you have to override Bootstrap's CSS or modify its Sass variables.

Aspect	Bootstrap	Tailwind CSS
Core philosophy	Provides ready-made components	Provides atomic classes you compose yourself
Customization	Overriding defaults is painful	Mix and match freely, no overrides needed
Learning curve	Learn component names	Learn which class maps to which CSS property
Bundle size	Ships many styles you don't use	Only includes classes you actually use
Design freedom	All Bootstrap sites look the same	Every site can look unique

vs Hand-written CSS

Aspect	Hand-written CSS	Tailwind CSS
Naming	Every style needs a class name	No naming — just compose classes
File switching	Jump between HTML and CSS files	Everything lives in HTML
Code volume	Two sets of files, considerable amount	One line of classes does the job
Maintainability	Find the style in CSS to change it	Change the class right in HTML
Consistency	Relies on team conventions	Built-in design system, automatic consistency

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Profile Card</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="max-w-xs mx-auto p-6 bg-white rounded-2xl shadow-lg text-center">
    <img src="https://i.pravatar.cc/80" alt="Avatar"
         class="w-20 h-20 rounded-full mx-auto mb-3">
    <h2 class="text-xl font-bold text-gray-900 mb-1">John Doe</h2>
    <p class="text-sm text-blue-600 mb-2">Frontend Engineer</p>
    <p class="text-sm text-gray-500 mb-4">Passionate about coding, focused on Web development</p>
    <button class="bg-blue-600 text-white px-6 py-2 rounded-lg cursor-pointer
                   hover:bg-blue-700 transition-colors">
      Contact Me
    </button>
  </div>
</body>
</html>

▶ Try it Yourself

Save this code as an .html file and open it in your browser — no installation needed, it just works.

💡 Do Tailwind classes look long and ugly? Almost everyone thinks so at first. But after a week of use, most people change their minds — "ugly but efficient" beats "pretty but tedious." Class names are essentially abbreviations of CSS properties; once you're familiar with them, they don't feel long at all.

3. Key Changes in Tailwind CSS v4

Tailwind CSS v4 was released in March 2025, bringing major architectural upgrades over v3:

Change	v3 Approach	v4 Approach
Build engine	JavaScript	Rust (Oxide engine), 3.5× faster builds
CSS entry point	`@tailwind base/components/utilities`	`@import "tailwindcss"`
Configuration	`tailwind.config.js`	`@theme` directive in CSS
Custom themes	JS config file	CSS native variables + `@theme`
New features	—	Container queries, `@starting-style`, CSS nesting

For beginners, the biggest takeaway from v4 is that configuration is simpler — scenarios that previously required installing npm packages and writing config files now work with a single @import "tailwindcss" line.

⚠️ Note: Many tutorials online are still based on v3. If you see tailwind.config.js or @tailwind base syntax, that's the old version. This tutorial is based on v4, and all examples use the latest syntax.

4. Prerequisites for Learning Tailwind

Before starting this tutorial, you should already know:

HTML basics: How to write tags, attributes, and class names
CSS basics: The fundamentals of Flexbox, Grid, the box model, and responsive design

If you need a refresher, check out our HTML Tutorial and CSS Tutorial. With these foundations in place, learning Tailwind is smooth sailing.

💡 Tailwind is not for "learning CSS" — it's for "writing CSS more efficiently." If you're still unsure what display: flex does, we recommend brushing up on CSS basics before continuing.

Common Use Cases

Rapid prototyping: From design mockup to a working page, Tailwind is one of the most efficient solutions available. No writing CSS, no naming classes, no switching files.
Personal projects / landing pages: A single HTML file + CDN is all you need — great for product showcases, event pages, and personal homepages.
Large-scale projects: Pair Tailwind with a component framework (React/Vue) for fully self-contained component styles with zero conflicts.
Admin dashboards: Tailwind's spacing system + Flex/Grid utilities let you build dashboard layouts several times faster than hand-written CSS.

❓ FAQ

Q Should I learn Tailwind or Bootstrap?

A Both are worth learning, but they serve different purposes. Bootstrap is great for "quickly putting together a decent-looking interface," while Tailwind excels when you need "precise control over every pixel." If you value design freedom and long-term maintainability, Tailwind is the better choice. If you just need an internal tool up and running fast, Bootstrap gets you there sooner. Industry trends show Tailwind's growth has already overtaken Bootstrap.

Q With such long class names, won't my HTML files get bloated?

A They will — that's Tailwind's most common criticism. A simple button might have six or seven classes. But there are mitigations: production builds use tools that compress class names into short tokens; repeated class combinations can be extracted with @apply (covered later); when used with React/Vue components, classes live inside component files and don't feel messy.

Q Does Tailwind hurt page performance?

A No — quite the opposite. Tailwind's production build removes all unused classes (tree-shaking), resulting in a CSS file that's typically around 10KB. The CDN version (used during development) is indeed larger, but running it through a build tool before deployment produces a tiny output.

Q Where should I start learning Tailwind?

A Start by understanding the Utility-First philosophy (this lesson), then set up and run a minimal example (next lesson), work through the most commonly used classes (spacing, colors, typography), and finally tackle layouts (Flex, Grid) and responsive design. Our tutorial follows exactly this path — just follow along.

📖 Summary

Tailwind is a utility-first CSS framework that controls styles by composing atomic classes
Unlike Bootstrap, Tailwind doesn't provide ready-made components — it provides the building blocks to create your own
Traditional CSS requires naming, file switching, and overriding; Tailwind keeps everything in HTML for greater efficiency
v4 is built on a Rust engine and uses @import "tailwindcss" instead of v3's @tailwind directives
You need HTML and CSS basics before learning Tailwind — it helps you "write CSS better," not "skip learning CSS"
Adding the CDN link (<script src="https://cdn.tailwindcss.com"></script>) to your HTML lets you try it instantly

📝 Exercises

Basic (Difficulty ⭐): Take an HTML page you've already written (even just a few lines of text), add the Tailwind CDN link to its <head>, and use Tailwind classes to change the text color and font size. See the result.
Intermediate (Difficulty ⭐⭐): Build a simple card component with hand-written CSS (at least a title, some text, and a button), then rebuild it with Tailwind. Compare the amount of code and the development experience between the two approaches. Don't worry about aesthetics — the goal is to feel the difference.
Challenge (Difficulty ⭐⭐⭐): Open https://play.tailwindcss.com/ (Tailwind's official online Playground) and build a personal profile page in the left-hand editor, including: a circular avatar, a name (large and bold), a bio (gray text), three skill tags (rounded, light-colored background), and a button. Use only Tailwind classes — no custom CSS at all.

What is Tailwind CSS

1. What is Tailwind CSS

Example: Traditional CSS vs Tailwind (Difficulty ⭐)

Example: Tailwind approach (Difficulty ⭐)

2. Tailwind vs Traditional Frameworks

vs Bootstrap

vs Hand-written CSS

Example: A simple profile card (Difficulty ⭐)

3. Key Changes in Tailwind CSS v4

4. Prerequisites for Learning Tailwind

Common Use Cases

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好