tailwind-css-best-practices

Instruction file imported from bruno-keiko/nextjs-fsd-starter (.cursor/rules/tailwind-css-best-practices.mdc). Copyright stays with the author.

• Use Tailwind's utility-first approach for consistent styling.
• Leverage Tailwind's responsive prefixes (sm:, md:, lg:, xl:, 2xl:) for mobile-first responsive design.
• Use @apply directive sparingly; prefer utility classes directly in HTML/JSX.
• Create custom components with @layer components for repeated patterns.
• Use Tailwind's built-in design tokens for spacing, colors, and typography.
• Implement dark mode using Tailwind's dark: variant.
• Use group and peer variants for interactive states.
• Create custom utilities with @layer utilities for project-specific needs.
• Use theme() function to reference Tailwind's design tokens in custom CSS.
• Avoid arbitrary values (w-[532px]) when possible; define custom values in tailwind.config.js.
• Use container class for responsive containers with max-width constraints.
• Implement proper focus styles for accessibility using focus: and focus-within: variants.
• Use sr-only for screen reader-only content.
• Optimize for production by purging unused styles with NODE_ENV=production.
• Use plugins like @tailwindcss/typography for rich text content.
• Configure content paths properly in tailwind.config.js for purging.
• Extend themes rather than overriding default values when possible.
• Use preflight to reset browser default styles.