Tailwind CSS

          
            ## Guidelines for Tailwind V4

1.  Target Version: Assume Tailwind CSS v4.0 or later for all Tailwind-related tasks (code generation, refactoring, suggestions).
2.  CSS-First Configuration:

    - AVOID generating, modifying, or referencing `tailwind.config.js` or `tailwind.config.ts` for theme customizations (e.g., colors, spacing, fonts, breakpoints).
    - PRIORITIZE defining and extending the theme directly within the main CSS file using the `@theme` directive and native CSS syntax.
    - Utilize CSS custom properties (variables) within `@theme` for defining tokens.
    - Example of correct CSS configuration:

      ```css
      /* src/input.css */
      @import "tailwindcss";

      @theme {
        --color-primary: oklch(65% 0.25 290); /* Define custom color */
        --font-sans: "Inter", sans-serif; /* Override default font */

        /* Extend spacing scale */
        spacing: {
          112: 28rem;
          128: 32rem;
        }

        /* Add custom breakpoints */
        screens: {
          '3xl':'1920px', ;
        }
      }

      /* You can add other custom CSS or layers here */
      ```

3.  Import Method:
    - Ensure Tailwind CSS is imported using the standard CSS `@import "tailwindcss";` directive in the main CSS entry point.
    - REMOVE any legacy `@tailwind base;`, `@tailwind components;`, or `@tailwind utilities;` directives.
4.  Content Configuration:
    - Rely on Tailwind v4's automatic content detection.
    - Do NOT add or suggest configuring the `content` array in `tailwind.config.js`/`.ts` unless addressing a specific, known edge case where automatic detection fails.
5.  Utilize v4 Features:
    - Leverage native CSS variables provided by Tailwind for accessing theme values in custom CSS (e.g., `color: var(--color-primary);`).
    - Employ new v4 utilities and variants where appropriate (e.g., container queries (`@`), `not-*` variant, `@starting-style`, expanded gradient utilities).
    - Use modern CSS functions like `color-mix()` where beneficial.
6.  Browser Compatibility:
    - Acknowledge the modern browser requirements of v4 (Safari 16.4+, Chrome 111+, Firefox 128+).
    - If the user explicitly requires support for older browsers, advise that Tailwind CSS v3.4 might be necessary and explain the limitation.
7.  Migration Tasks:
    - When assisting with migration from v3 to v4, focus on:
      - Replacing `@tailwind` directives with `@import "tailwindcss";`.
      - Translating configurations from `tailwind.config.js`/`.ts` (like `theme`, `extend`) into the `@theme` block in the CSS file.
      - Removing the now-unnecessary `tailwind.config.js`/`.ts` file if it only contained configurations now handled in CSS.