A Tailwind class such as md:hover:bg-blue-500/50 looks cryptic until you know the grammar behind it. The grammar is small and completely regular, which is why experienced developers can read and write utilities without consulting documentation. In this lesson you will learn the anatomy of a utility, how variants stack, what the negative, important and prefix modifiers do, and how to set up your editor so it does most of the remembering for you.
Every utility follows the same shape: optional variants, a property keyword, a value, and optional modifiers.
| Part | Example | Meaning |
|---|---|---|
| Variant(s) | md:, hover:, dark: | Conditions, applied left to right |
| Property | bg, text, p, w | Abbreviated CSS property |
| Value | blue-500, 4, full | Theme key or scale step |
| Modifier | /50 | Opacity (colors) or line-height (font size) |
| Important | ! suffix | Adds !important |
The property keywords are consistent abbreviations: p padding, m margin, w width, h height, bg background, text color and font size, border, rounded, shadow, gap, grid-cols. Directional suffixes are also uniform — t, r, b, l, x, y, and the logical s (start) and e (end): pt-4, px-6, ms-auto, border-b.
Numeric values map onto the spacing scale, where each unit is 0.25rem. p-4 is therefore padding: 1rem, and w-64 is 16rem. Named values come from the theme: text-lg, rounded-xl, shadow-md, bg-emerald-600.
Variants are prefixes separated by colons. Tailwind v4 applies them from left to right, so md:hover:bg-blue-500 means "at the md breakpoint and above, when hovered, use blue". You can stack as many as you need:
<a class="text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white md:text-lg">
Docs
</a>The order of classes inside the class attribute does not matter. What matters is the order Tailwind emits the CSS, which is fixed: base utilities, then variants, with responsive breakpoints from smallest to largest. This is why sm: styles never override lg: styles, regardless of where you type them.
Three small modifiers show up constantly in real code:
<!-- Negative: leading dash pulls the element up by 0.5rem -->
<div class="-mt-2">...</div>
<!-- Important: trailing ! adds !important -->
<p class="text-center!">Always centered</p>
<!-- With a prefix configured, every class starts with tw: -->
<p class="tw:text-center tw:md:text-left">Prefixed</p>Negative values work for margins, insets, translations, rotations and z-index. The important suffix is a last resort for fighting third-party CSS. A prefix is enabled with @import "tailwindcss" prefix(tw); and is only worth it when Tailwind must coexist with another framework that uses similar class names.
Two tools turn Tailwind from "memorize everything" into "type and accept":
Tailwind CSS IntelliSense (VS Code extension, also available for JetBrains IDEs) provides autocomplete, hover previews of the generated CSS, color swatches and linting for conflicting classes. It reads your CSS entry file, so custom @theme values appear in suggestions immediately.
Prettier plugin sorts classes into Tailwind's recommended order on save, which makes diffs consistent across a team:
npm install -D prettier prettier-plugin-tailwindcss{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindStylesheet": "./src/app.css"
}The tailwindStylesheet option points the plugin at the file that contains @import "tailwindcss", which it needs in v4 to learn about your theme.
p-4 px-8), the more specific one wins because Tailwind emits it later, but p-4 p-8 is a conflict — remove one.In `lg:focus:ring-2`, which order are the variants applied in?
variants:property-value/modifier!, with abbreviations that stay consistent across every property.0.25rem; named values come from the theme.- negates a value, a trailing ! adds !important, and prefix(tw) namespaces every class.prettier-plugin-tailwindcss (with tailwindStylesheet) remove most of the memorization.Next lesson: Colors, Backgrounds and Text Utilities — apply the color palette to text, backgrounds and borders.