Frontend CSS

Write and structure CSS using Tailwind CSS v4.0+ utility classes as the default approach, with CSS Modules (camelCase class names) or custom CSS when Tailwind doesn't achieve the desired visual result. Use this skill when styling UI components, implementing layouts, adding responsive breakpoints, creating animations, defining design tokens, or handling dark mode. Apply when working on component files with className attributes, CSS Module files (*.module.css with PascalCase filenames), Tailwind configuration (tailwind.config.js), global stylesheets (globals.css), or any styling-related code. This skill ensures Tailwind CSS as the primary styling method with organized utility classes (layout → spacing → typography → colors → borders → responsive), mobile-first responsive design (sm: 640px, md: 768px, lg: 1024px, xl: 1280px), consistent design tokens defined in tailwind.config.js, CSS Modules with camelCase for custom styles when needed, accessible focus states (focus:ring-2 focus:ring-offset-2) and color contrast (4.5:1 minimum), dark mode support (darkMode: 'class'), custom keyframe animations in config, performance optimizations through CSS purging, and no inline styles.