Tailwind: style an element right in its class list
No stylesheet, no invented class names, no hunting through files. With Tailwind you style an element where it stands, by listing small classes that each do one thing.
The big idea
Tailwind provides single-purpose utility classes that you combine in an element's class attribute to build any design.
See it in code
Read a class list left to right and you can see the design. Size, weight, and color for a title; uppercase and wide letter spacing for a small label:
<section class="px-6 py-8">
<p class="text-sm font-semibold uppercase tracking-widest text-violet-400">NASA Outreach Program</p>
<h1 class="text-6xl font-extrabold text-sky-300">COSMOS</h1>
<p class="text-xl text-slate-300">Explore the universe through NASA's real missions.</p>
</section>Colors come in scales from 50 (lightest) to 950 (darkest), so text-violet-400 and text-sky-300 are light tints that read well on a dark page.
A gradient needs a direction plus from- and to- colors. A slash after a color sets its opacity, which turns a shadow into a colored glow:
<div class="m-6 rounded-2xl border border-white/10 bg-gradient-to-r from-sky-600 to-fuchsia-600 p-8 shadow-2xl shadow-violet-500/40">
<span class="rounded-full bg-gradient-to-r from-pink-500 to-orange-400 px-3 py-1 text-xs font-bold">Moon to Mars</span>
<h3 class="mt-3 text-2xl font-bold">Artemis: back to the Moon</h3>
<p class="mt-2 text-indigo-100">A step toward sending astronauts to Mars.</p>
</div>shadow-violet-500/40 is a violet shadow at 40% opacity. border-white/10 is a white border at 10%, which reads as a faint glass edge.
A prefix applies a class only in a certain state. hover: fires while the pointer is over the element, and transition animates the change instead of snapping:
<div class="flex items-center justify-center gap-6 bg-gradient-to-br from-indigo-900 to-slate-950 p-12">
<a href="#missions" class="rounded-full bg-violet-600 px-8 py-3 font-semibold transition hover:scale-105 hover:bg-violet-500">Launch into COSMOS</a>
<div class="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur transition hover:-translate-y-1 hover:shadow-xl hover:shadow-sky-500/30">Glass card</div>
</div>The button grows and brightens; the card lifts and glows. Without transition, both changes would still happen, just instantly.
Composing small single-purpose pieces is a pattern well beyond CSS: short functions you combine, command-line tools you pipe together, components you assemble into pages.
Try it yourself
Change from-sky-600 to-fuchsia-600 to two colors of your own and adjust the glow to match. Then remove bg-gradient-to-r and see what from- and to- do without it.
The common mistake
Trusting a misspelled class. Tailwind ignores a class it doesn't recognize, so text-sky-30 or gradient-to-r produces no error and no style. When a style is missing, read the class name letter by letter.
What it unlocks
Every utility is a line of CSS. Layout utilities get their own articles: flexbox, grid, and responsive prefixes like md:.