Introduction to Tailwind CSS
Understand what Tailwind CSS is, why utility-first styling is useful, how it differs from traditional CSS, and how to approach the course.
What Tailwind CSS is and how it works
Tailwind CSS is a utility-first CSS framework. Instead of choosing a prebuilt component such as btn-primary, you compose small, single-purpose classes directly in your markup. A class such as p-4 adds padding, text-lg changes font size, and rounded-xl rounds corners.
The browser still receives ordinary CSS. Tailwind scans your source files for class names and generates the corresponding CSS rules. It does not replace HTML, CSS fundamentals, or the browser layout engine; it gives you a consistent vocabulary for expressing styles.
Mental model: HTML describes structure, Tailwind classes describe presentation, and the generated stylesheet contains the rules the browser applies.
- Tailwind classes are CSS utilities, not a separate rendering system.
- The browser ultimately applies normal CSS rules.
- Class names should be complete and detectable in source files.
What is the main idea behind utility-first CSS?
Tailwind CSS vs. traditional CSS
Traditional CSS usually creates semantic classes and writes rules in a stylesheet. Tailwind moves many styling decisions close to the element that uses them. Neither approach is universally superior: Tailwind is particularly useful when a team wants consistent spacing, responsive variants, and quick iteration; traditional CSS remains valuable for complex selectors, reusable design primitives, and specialized effects.
| Traditional CSS | Tailwind CSS |
|---|---|
.card { padding: 1rem; } | class="p-4" |
| Styles live mainly in CSS files | Utilities are composed in markup |
| Naming classes is part of the workflow | The utility vocabulary reduces one-off naming |
| Custom selectors are natural | Custom CSS can still be added when appropriate |
Avoid treating a long class string as automatically good or bad. Judge it by consistency, readability, reuse, and how often the same pattern appears.
<!-- Traditional CSS -->
<article class="product-card">
<h2>Starter plan</h2>
<p>Useful tools for a small project.</p>
</article>
<style>
.product-card { padding: 1rem; border: 1px solid #d1d5db; border-radius: 0.75rem; }
</style>
<!-- Tailwind CSS -->
<article class="rounded-xl border border-gray-300 p-4">
<h2 class="text-lg font-semibold">Starter plan</h2>
<p class="mt-2 text-gray-600">Useful tools for a small project.</p>
</article>- Tailwind reduces the need for one-off class names, not the need to understand CSS.
- Custom CSS and Tailwind utilities can coexist.
- Readability and consistency matter more than minimizing line length.
Setup options and the learning project
For a quick experiment, use the official Tailwind Play environment. For a production app, install Tailwind through the integration appropriate to your build tool or framework. Tailwind CSS v4 has a CSS-first setup and differs from many older v3 tutorials; when following a guide, verify which major version it targets.
Throughout this course, build a small TaskFlow dashboard: a responsive header, task summary cards, a task list, filter controls, a form, and a dark theme. You will progressively improve the same interface instead of learning isolated utilities without context.
Suggested workflow
- Start with semantic HTML and a working app.
- Add layout utilities before decorative styles.
- Make the smallest viewport work first.
- Add responsive and interaction states.
- Test keyboard focus, contrast, and production output.
- Practice project:
TaskFlow dashboard - Prerequisites:
Basic HTML; CSS fundamentals are helpful - Version note:
Prefer current Tailwind v4 documentation
Tailwind v3 and v4 setup instructions are not interchangeable. If a tutorial asks you to create a tailwind.config.js and use @tailwind base, it may be describing v3.
What should you verify before copying Tailwind setup instructions?