# Nextjs15 React19 Vercelai Tailwind Cursorrules Prompt File Cursorrules

> 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/**/*

- Skill: `diegosouzapw/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-c` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-c`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-c/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-c

---


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