IDE agent context for tailwind v4

### Tailwindcss V4
**Tailwind CSS Cheat Sheet**

Theming without config.js: Tailwind v4.0 allows direct CSS customization. Variables can be declared within your css files and used. For example, you can declare color variables in your main css file, and then use them within your tailwind classes. This allows for css first configuration.

**Core Concepts:**

* **Utility-First:** Class-based styling.
* **Responsive:** Breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:).
* **Dark Mode:** `dark:` prefix.
* **Dynamic States:** `hover:`, `focus:`, `active:`, `group-hover:`.

**Essential Class Categories:**

* **Layout:** `m-`, `p-`, `w-`, `h-`, `flex`, `grid`.
* **Typography:** `text-`, `font-`, `leading-`.
* **Background & Color:** `bg-`, `text-`, `border-`.
* **Spacing:** `m-`, `p-`.
* **Borders:** `border`, `rounded-`.

**Naming Conventions:**

* `[prefix]-[modifier]-[property]-[value]`
    * Prefixes: `m` (margin), `p` (padding), `text` (text).
    * Modifiers: `sm`, `lg`, `2xl`, `hover`.

**Directives:**

* `@tailwind base`: Inject base styles.
* `@tailwind components`: Inject component styles.
* `@tailwind utilities`: Inject utility styles.
* `@tailwind variants`: Controls variant injection.
* `@layer`: Organize styles.
* `@apply`: Extract utility classes.
* `@utility`: add custom utilities.
* `@theme`: Define design tokens.
* `@plugin`: Load plugins.

**Dynamic States:**

* `hover:bg-blue-500`: Change background on hover.
* `focus:outline-none`: Remove outline on focus.
* `group-hover:text-white`: Style children on parent hover.

**Responsive Design:**

* `sm:text-lg`: Apply large text on small screens and above.
* `md:flex`: Apply flexbox on medium screens and above.

**Dark Mode:**

* `dark:bg-slate-800`: Dark background in dark mode.
* `darkMode: 'class'` in tailwind.config.js for class based dark mode.

**Accessibility:**

* `sr-only`: Hide visually, show to screen readers.
* `not-sr-only`: Show visually, hide from screen readers.

**Animations & Interactivity:**

* `transition-all`: Smooth transitions.
* `animate-spin`: Spinning animation.
* `cursor-pointer`: Change cursor.
* `pointer-events-none`: Disable pointer events.

**Pseudo-Elements:**

* `before:content-['*']`: Add content before.
* `after:ml-0.5`: Add margin after.

**Tips & Tricks:**

* `accent-pink-500`: Customize form element colors.
* `text-[min(10vw,70px)]`: Fluid text sizing.
* `open:bg-white`: Style open accordion.
* `file:mr-4`: Style file inputs.
* `selection:bg-green-400`: Customize text selection.
* `caret-pink-500`: Customize caret color.