Tailwind CSS Developer Guide

This skill provides guidelines, patterns, and best practices for working with Tailwind CSS v4 in this project.

Quick Reference

For detailed patterns, examples, and checklists, see:

• references/patterns.md - Complete usage patterns, design tokens, and anti-patterns

Core Principles

• Utility-First: Embrace utility-first approach and avoid custom CSS.
• Design Tokens: Always use design system tokens (bg-background, text-foreground) instead of explicit colors (bg-white, text-black).
• Tailwind Variants: Use tailwind-variants (tv) for component styling instead of CVA.
• Mobile-First: Build responsive layouts with mobile-first approach.

Critical: Design Token Usage

To ensure theme switching works correctly: