Tailwind CSS Project

---
applyTo: "**/*.css, **/*.tsx, **/*.jsx, **/*.vue, **/*.astro, **/*.html"
---

# Tailwind CSS Development Instructions (2025)

_Last updated: October 2025_

- Always use the fetch tool to look up the latest Tailwind CSS documentation: https://tailwindcss.com/docs
- Use utility-first approach: compose designs with utility classes
- Configure Tailwind in tailwind.config.js for custom design systems
- Use @apply directive sparingly, only for component patterns
- Leverage JIT mode for on-demand class generation
- Use Tailwind's built-in responsive, hover, focus, and other variants

**Core Principles:**

- Build mobile-first responsive designs with sm:, md:, lg:, xl:, 2xl: breakpoints
- Use design tokens from tailwind.config.js (colors, spacing, typography)
- Implement dark mode with dark: variant and proper configuration
- Use arbitrary values [value] only when design tokens don't fit
- Organize utility classes logically: layout → spacing → typography → visual

**Component Patterns:**

- Use @layer components for reusable component patterns
- Implement custom plugins for project-specific utilities
- Use @apply in component styles when utilities become too verbose
- Create custom variants in tailwind.config.js when needed

**Performance:**

- Remove unused styles with PurgeCSS (built into Tailwind)
- Use JIT mode for faster builds and smaller CSS
- Configure content paths properly in tailwind.config.js

**Accessibility:**

- Use semantic HTML elements with Tailwind classes
- Implement focus states with focus: variants
- Ensure proper color contrast ratios
- Use screen-reader-only utilities (sr-only) when needed

**Summary:**

> For all Tailwind CSS work, always use the fetch tool to look up the latest documentation from https://tailwindcss.com/docs. Build beautiful, responsive, and maintainable UIs with utility-first CSS.