Tailwind CSS Introduction

What Is Tailwind CSS?

Tailwind CSS is an open-source CSS framework created by Adam Wathan and the Tailwind Labs team. Instead of shipping pre-designed components like Bootstrap, Tailwind ships thousands of small, single-purpose utility classes such as flex, p-4, text-center, and bg-blue-500. You compose these classes directly in your markup to build any design.

Under the hood, Tailwind uses a build-time engine that scans your project files, finds every class you actually use, and generates a tiny CSS file containing only those styles. This means you get the full power of a complete design system without shipping megabytes of unused CSS to the browser.

<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
  Get Started
</button>

Every visual detail of this button, rounded corners, background color, padding, font weight, and the hover color change, comes from utility classes instead of a separate stylesheet.

How Tailwind Class Names Work

<div class="{property}-{value}">
<div class="{breakpoint}:{property}-{value}">
<div class="{state}:{property}-{value}">

• Most utilities follow a property-value pattern, like text-lg or bg-red-500.
• Responsive breakpoints prefix the utility, like md:flex or lg:grid-cols-3.
• Interaction states prefix the utility too, like hover:bg-blue-700 or focus:outline-none.
• Multiple prefixes can stack, such as md:hover:bg-blue-700.

Tailwind CSS Quick Reference

These are the utility categories you will use in almost every project, with one example class from each.

Utility-First vs Traditional CSS

With traditional CSS, you write a class name in HTML and then define its styles in a separate stylesheet. With Tailwind, the styling decisions live directly in the class attribute, so you rarely need to invent new class names or switch files to change a style.

<!-- Traditional CSS -->
<div class="card">Card content</div>
<style>
.card {
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<!-- Tailwind CSS -->
<div class="rounded-lg p-4 shadow-sm">Card content</div>

Both examples produce the same visual result, but the Tailwind version needs no separate stylesheet or custom class name.

Tailwind CSS vs Bootstrap

Bootstrap ships opinionated, pre-styled components (buttons, cards, navbars) that look similar out of the box unless you override them. Tailwind ships low-level utilities and no default component look, so every project can have a completely unique visual identity while still reusing the same class vocabulary.

• Bootstrap: fast for prototypes that can look like "every other Bootstrap site".
• Tailwind: slightly more setup, but no fighting against a framework's default look.
• Bootstrap components rely on bundled JavaScript; Tailwind is CSS-only by design.
• Tailwind pairs naturally with component frameworks like React, Vue, or Astro.

Why Teams Choose Tailwind CSS

Tailwind removes the naming problem in CSS. You never have to invent class names like .hero-wrapper-inner again, because the utility classes describe exactly what they do.

Because styles live next to markup, refactoring is safer: deleting a component deletes its styles too, and nothing is left behind in an ever-growing global stylesheet.

• No unused CSS in production thanks to the build-time class scanner.
• Consistent spacing and color scales across the entire team.
• Responsive and state-based styling without writing media queries by hand.
• Highly configurable design tokens through a single configuration file.

Common Mistakes

• Assuming Tailwind is just inline styles; it actually generates real, cacheable CSS classes at build time.
• Writing custom CSS for things Tailwind already provides, like spacing or color utilities.
• Expecting Tailwind to include pre-built components like Bootstrap; components are something you build with utilities or add from a library.
• Not configuring the content/scan paths, which causes needed classes to be purged from the final CSS.
• Trying to memorize every utility instead of relying on editor autocomplete and the documentation search.

Key Takeaways

• Tailwind CSS is a utility-first framework, not a component library.
• Utility classes follow predictable property-value naming, with prefixes for breakpoints and states.
• Tailwind's build step removes unused CSS, keeping production bundles small.
• Tailwind differs from Bootstrap by giving you low-level building blocks instead of finished components.
• Understanding utility-first thinking is the foundation for every other Tailwind lesson in this course.