How it works
Searching
The search matches the class name, the CSS it produces and its example, ignoring case. So you can look up p-4, or type the property you remember (grid-template-columns, font-weight) and find the class that writes it. The first match is picked as you type.
Classes are grouped as the Tailwind docs group them: layout (display, position, flexbox, grid, alignment), spacing and sizing, type, backgrounds, borders, effects, motion and the state prefixes.
The live specimen
For a class that maps to plain CSS, its declaration is applied to a sample on the right: three numbered blocks for layout classes (the middle one takes classes that act on a child, such as col-span-2 or grow), a padded box for spacing, a line of text for type, a swatch for colours and a labelled box for sizes, borders, shadows and transforms.
Spacing values follow Tailwind’s default scale, where one step is 0.25rem (4px at the browser’s default 16px font size), so p-4 is 1rem.
spacing n = n × 0.25rem
Prefixes
Breakpoints (sm:, md:, lg:…) and states (hover:, focus:, dark:…) do not style anything alone; they change when the class after them applies. Their entries show an example of the prefix in use instead of a specimen.
