name: tailwind-patterns description: >- Utility-first CSS with Tailwind — responsive design, custom configuration, and component styling.

Tailwind Patterns

Description

Utility-first CSS with Tailwind — responsive design, custom configuration, and component styling.

Instructions

• Use Tailwind utility classes directly in JSX. Avoid custom CSS files unless truly necessary.
• Responsive design: mobile-first with breakpoint prefixes (sm:, md:, lg:, xl:).
• Group related utilities logically: layout → spacing → typography → colors → effects.
• Extract repeated class combinations into components, not @apply directives.
• Use cn() or clsx() for conditional class merging — never string concatenation.
• Customize the Tailwind config for brand colors, fonts, and spacing scale — use semantic names.
• Use dark: variant for dark mode. Design light mode first.
• Prefer gap over margins for flex/grid spacing.
• Use Tailwind's built-in animations (animate-spin, animate-pulse) before custom keyframes.
• Keep the purge config accurate to minimize CSS bundle size.