nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules

name	nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules
description	Apply for nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. --- description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/*
source	cursorrules

nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file

---

description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/*

• 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.