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.