Explain Tailwind CSS code

What this Tailwind CSS sample shows

utility classes

Most classes set 1 or 2 CSS properties; line-clamp-2 sets 4. Sizes count in steps of --spacing, 0.25rem: p-6 became padding: calc(var(--spacing) * 6), 1.5rem, and size-24 set both width and height to 6rem. max-w-sm is 24rem, rounded-2xl 1rem, and line-clamp-2 cuts the blurb off after 2 lines.

breakpoints

A prefix like md: applies the class only from a screen width up: md:flex became display: flex inside @media (width >= 48rem), 768px, and sm: used 40rem. Without a prefix a class applies at every width, so the card is a column on a phone and a row on a wider screen.

states and dark mode

hover:bg-indigo-500 only applies under @media (hover: hover), so on a touch screen that can't hover the button keeps its normal color. disabled:opacity-50 matches :disabled. dark: followed the system setting, prefers-color-scheme: dark. With @custom-variant dark (&:where(.dark, .dark *)) in the CSS, it followed a dark class instead.

how classes are found

Tailwind reads your files as plain text and writes CSS only for the class names it finds. This file has 35 different classes and the build had 35 rules, one for each. A class built from a variable, bg-${color}-500, got no rule, because the full name bg-red-500 never appears in the file. A typo, md:flx, got no rule and no warning either.

Good to know

• Run with Tailwind CSS 4.3.4 and its command line tool, building CSS from this one file, with source(none) so no other file in the folder was read.
• With p-2 p-4 and with p-4 p-2 in the same className, the CSS had .p-2 first and .p-4 after it, so p-4 wins either way: the order classes are written in doesn't decide which one applies.

Watch out: Classes put together from pieces silently do nothing. bg-${color}-500 looks fine in the code and produced no CSS at all, so the element just had no background. Write the full class name for every option, for example a map from red to bg-red-500, so Tailwind can find each one.