Tailwind CSS v4

Purpose

Provide comprehensive Tailwind CSS v4 styling patterns for Next.js applications using the modern CSS-first configuration approach. Emphasize utility-first design, mobile-first responsive patterns, 8px grid alignment, and accessibility-first principles aligned with Atlas design system.

When To Use This Skill

Component Styling:

• Apply Tailwind utility classes to new components
• Create responsive layouts using flexbox and grid
• Implement spacing using 8px grid system
• Style interactive states (hover, focus, active, disabled)