22 lines
1.5 KiB
Plaintext
22 lines
1.5 KiB
Plaintext
---
|
|
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. |