Generation STEM
Learning LibraryWebsite Development LibraryTeens

Tailwind: style with utility classes in your markup

Tailwind flips how you style. Instead of writing CSS in a separate file, you compose designs from tiny utility classes — p-6, rounded-xl, font-bold — right on the element.

The big idea

Tailwind provides thousands of single-purpose utility classes so you style elements directly in your markup, without writing custom CSS.

See it in code

1The basics

Each Tailwind class does one small thing. p-6 is padding, bg-white is a white background. You stack them right on the element, no separate CSS file. (In a real project Tailwind ships these classes; the preview defines just the few we use so it runs on its own.)

html
<style>
  .p-6 { padding: 1.5rem; } .bg-white { background: #fff; }
</style>

<div class="p-6 bg-white">Nova Rocket</div>
Two utility classes, straight in the markup:

class="p-6 bg-white" reads like the design itself: padded and white. Each class maps to exactly one CSS property.

2A step further

Stack a few more. rounded-xl rounds the corners, shadow lifts it off the page, and font-bold thickens the text — it's starting to look like a card:

html
<style>
  .p-6 { padding: 1.5rem; } .bg-white { background: #fff; }
  .rounded-xl { border-radius: .75rem; }
  .shadow { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  .font-bold { font-weight: 700; }
</style>

<div class="p-6 bg-white rounded-xl shadow">
  <span class="font-bold">Nova Rocket</span>
</div>
More utilities compose into a card shape:

You compose utilities like Lego bricks. Add one class, get one change — no naming things, no CSS file to open.

3In our world

The finished card. max-w-xs caps the width and text-slate-500 mutes the description — a whole component, no CSS file touched:

html
<style>
  .max-w-xs { max-width: 20rem; } .p-6 { padding: 1.5rem; }
  .bg-white { background: #fff; } .rounded-xl { border-radius: .75rem; }
  .shadow { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  .text-lg { font-size: 1.125rem; } .font-bold { font-weight: 700; }
  .text-slate-800 { color: #1e293b; } .text-slate-500 { color: #64748b; }
  .mt-2 { margin-top: .5rem; }
</style>

<div class="max-w-xs p-6 bg-white rounded-xl shadow">
  <h3 class="text-lg font-bold text-slate-800">Nova Rocket</h3>
  <p class="mt-2 text-slate-500">Built from utility classes — no separate CSS file.</p>
</div>
The card, composed from utility classes alone:

Each class does exactly one thing: p-6 is padding, font-bold is weight, text-slate-500 is a color. You compose them like Lego bricks, reading the design straight from the markup — no jumping to a CSS file, no inventing class names.

The same idea, everywhere

Utility-first thinking — many tiny, composable, single-purpose pieces — appears well beyond CSS: Unix commands you pipe together, small functions you combine, design tokens. The trade-off is verbose markup in exchange for speed, consistency, and never leaving your HTML.

Try it yourself

Add border and text-center utilities (define them in the style block) and apply them. Then imagine the real Tailwind: you'd just add the class names and they'd already exist.

The common mistake

Thinking Tailwind means no CSS knowledge needed. The utilities are CSS — p-6 is just padding: 1.5rem. Without understanding the box model and flexbox underneath, the class names are memorization. Learn the CSS, and Tailwind becomes a fast shorthand.

What it unlocks

Tailwind is a shorthand for CSS, styles your HTML, and pairs naturally with components.

Related concepts