What Is Tailwind CSS?

Learn what Tailwind CSS is and how utility-first styling works.

Syntax<div class="p-4 bg-cyan-500 text-white rounded">Hi</div>

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS in a separate file, you style elements by adding small, single-purpose utility classes right in your HTML.

What is a utility class?

A utility class does one job. For example, p-4 adds padding, text-center centers text, and bg-cyan-500 sets a background color. You combine many of them to build a design.

  • No switching between HTML and CSS files.
  • No inventing class names like .card-title-wrapper.
  • Consistent spacing, colors, and sizes out of the box.

The examples in this tutorial load Tailwind from the Play CDN, so you can press Run and see the result instantly.

Example

Try it yourself
Loading editor…
Press Run to see the result.

When to use it

  • A developer replaces a custom CSS file with Tailwind utility classes to style a landing page without writing any bespoke CSS.
  • A design team enforces visual consistency across a React app by relying on Tailwind's built-in design scale instead of ad-hoc color and spacing values.
  • A startup prototype is assembled in hours by composing utility classes directly in JSX templates, skipping the naming and file-switching of traditional CSS.

More examples

Basic utility class usage

Three single-purpose utility classes center text, set a blue color, and make the font bold — all without any custom CSS.

Example · html
<p class="text-center text-blue-600 font-bold">
  Hello, Tailwind!
</p>

Styled card with utilities

A complete card component is built purely from utility classes covering background, padding, radius, shadow, typography, and color.

Example · html
<div class="bg-white p-6 rounded shadow">
  <h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
  <p class="mt-2 text-gray-500">Card description goes here.</p>
</div>

Responsive and hover utilities

Responsive prefixes and hover variants extend utility classes to handle breakpoint changes and interactive states inline.

Example · html
<button class="bg-indigo-600 text-white px-4 py-2 hover:bg-indigo-700 md:px-6 md:py-3 md:text-lg">
  Get Started
</button>

Related

tw whytw utility first

Discussion

  • Be the first to comment on this lesson.
What Is Tailwind CSS? — Tailwind CSS | SoundsCode