What is Tailwind CSS?

A utility-first CSS framework where you style elements by composing small single-purpose classes (like p-4, flex, text-center) directly in your markup.

How do responsive prefixes work?

Prefix a utility with a breakpoint like sm:, md:, lg:, or xl: to apply it at that screen size and up, following a mobile-first approach.

How do I apply hover or focus styles?

Prefix with a state like hover:, focus:, or active: — for example hover:bg-blue-600.

What does a class like p-4 mean?

p-4 sets padding on all sides to 1rem. Tailwind's spacing scale uses 0.25rem steps, so 4 equals 1rem.

How do I use dark mode?

Prefix utilities with dark: to apply them when dark mode is active, e.g. dark:bg-gray-900.

trysys.jp

Reference

Tailwind CSS Cheat Sheet

Essential Tailwind utility classes — layout, spacing, colors, responsive and dark mode. Click any card to copy.