Tailwind CSS v4

Write modern, maintainable styles using Tailwind CSS v4's utility-first approach.

Quick Reference

Responsive: sm:, md:, lg:, xl:, 2xl: (mobile-first) States: hover:, focus:, active:, disabled:, group-hover:, peer-checked: Dark mode: dark: Arbitrary values: top-[117px], bg-[#bada55] CSS variables: bg-(--my-color) (v4 syntax)

Core Concepts

• Utility-First: Compose styles from single-purpose classes directly in HTML
• Mobile-First: Breakpoint prefixes apply at that width and above
• State Variants: Prefix utilities to apply conditionally
• Theme Variables: Define in @theme { } as CSS custom properties