tailwind-ui-patterns

Define a variants object with base, variant, and size class strings, then merge them with a cn() utility in your Button component. This pattern supports primary, secondary, outline, ghost, and destructive styles with consistent sizing options.

Use the @theme directive in your CSS file after importing tailwindcss to define custom colors, fonts, and spacing values. Tokens like --color-brand-500 become available as utilities such as bg-brand-500 throughout your project.

Yes, Tailwind v4 supports container queries using the @container class on a parent element and variants like @md: and @lg: on children. This lets components respond to their container size rather than the viewport.

Apply the dark: variant prefix to utilities, such as dark:bg-gray-900 alongside bg-white, so styles switch based on the color scheme. You can also define theme tokens that change values inside a prefers-color-scheme media query.

Extract a pattern into a reusable component when the same utility combination repeats three or more times. Use semantic color tokens like brand or surface instead of raw values to keep the design system consistent.