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.