CSS basics: what a class actually changes
text-6xl, p-8, text-center. Tailwind's classes look like a private language, but each one is a single line of CSS. Learn what CSS does and the classes stop being magic.
The big idea
CSS styles an element by setting properties such as color, size, and spacing; every element is a box with padding inside it and margin outside it.
See it in code
Each utility class sets one CSS property. text-6xl sets the font size, font-extrabold the weight, and text-sky-300 the color:
<h1 class="text-6xl font-extrabold text-sky-300">COSMOS</h1>In hand-written CSS that's font-size: 3.75rem, font-weight: 800, and color set to a light blue. The classes are shorthand for exactly those declarations.
Every element is a box. Padding is space inside the box's edge, so the background fills it. Margin is space outside the edge, so the background doesn't:
<div class="bg-violet-700 p-8">
<p>p-8: padding. The background fills this space.</p>
</div>
<div class="mt-8 bg-violet-700 p-2">
<p>mt-8: margin on top. The gap above is empty.</p>
</div>The first box is roomy because p-8 pushed its edge away from the text. The gap between the boxes is mt-8: margin, outside the second box, showing the page behind.
Some properties inherit. Set text-center on a parent and every element inside is centered, with no class of its own. Box properties such as padding and background do not inherit:
<div class="mx-6 mt-6 rounded-2xl bg-gradient-to-r from-sky-600 to-fuchsia-600 p-8 text-center shadow-2xl shadow-violet-500/40">
<p class="text-sm uppercase tracking-widest text-indigo-200">Mission spotlight</p>
<h3 class="mt-2 text-2xl font-bold">Artemis: back to the Moon</h3>
<p class="mt-2 text-indigo-100">NASA aims to land astronauts on the Moon again, as a step toward Mars.</p>
</div>None of the three children has text-center, yet all are centered. The gradient and padding belong to the div alone, which is why the children don't each get their own.
The box model is the foundation of every layout system, on the web and beyond. Print design, app interfaces, and slide decks all space things with the same inside-versus-outside distinction.
Try it yourself
Change p-8 to p-2 on the card and watch it tighten. Then swap mt-2 for mb-2 on the title and work out which gap moved and why.
The common mistake
Reaching for margin when you want padding. Margin on a card moves the whole card; it doesn't give the text inside any breathing room. If the background should cover the space, it's padding.
What it unlocks
These properties are what Tailwind's utilities set for you. Arranging boxes side by side is flexbox, and arranging them in rows and columns is grid.