Tailwind CSS usage rules for styling (2025 best practices)

## General Guidelines
- Use Tailwind utility classes for consistent styling, with custom CSS only for special cases  
- Organize classes logically (layout, spacing, color, typography)  
- Use responsive and state variants (e.g., sm:, md:, lg:, hover:, focus:, dark:) in markup  
- Embrace Tailwind v4 features like container queries and CSS variables  
- Rely on Tailwind classes rather than inline styles or external CSS files for a unified design language

## Configuration (CSS Files)
- Use the `@theme` directive to define custom design tokens like fonts, breakpoints, and colors
- Prefer modern color formats such as `oklch` for better color gamut support, defining them in the `:root` scope
- Take advantage of automatic content detection, which eliminates the need for a `content` array in configuration
- Rely on Oxide engine to scan project files, excluding those in `.gitignore` and binary extensions
- Add specific sources with `@source` only when necessary
- Extend Tailwind with custom utilities using the `@utility` directive in CSS files

## Styling (CSS Files)
- Incorporate 3D transform utilities like `rotate-x-*`, `rotate-y-*`, and `scale-z-*` for advanced visual effects
- Implement container queries with `@container`, `@max-*`, and `@min-*` utilities for adaptive layouts
- Use arbitrary values and properties with square bracket notation (e.g., `[mask-type:luminance]` or `top-[117px]`)
- Apply modifiers like `hover` or `lg` with arbitrary values for flexible styling
- Use the `not-*` variant for `:not()` pseudo-classes and the `starting` variant for `@starting-style`
- Check browser support for advanced features like `@starting-style` using resources like caniuse

## Components (HTML)
- Apply Tailwind utility classes directly in HTML for styling components