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/**/*
Installs into .claude/skills of the current project.
Are you the author of Nextjs15 React19 Vercelai Tailwind Cursorrules Prompt File Cursorrules?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/diegosouzapw-nextjs15-react19-vercelai-tailwind-cursorrules-pro)
---
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.
