Tailwind CSS v4 Migration Patterns

# Tailwind CSS v4 Migration Patterns for Google Antigravity

Master the new Tailwind CSS v4 features and migration patterns with Google Antigravity IDE. This comprehensive guide covers the new CSS-first configuration, container queries, 3D transforms, native cascade layers, and performance optimizations that make Tailwind v4 a game-changer for modern web development.

## Configuration

Configure your Antigravity environment for Tailwind v4:

```typescript
// .antigravity/tailwind-v4.ts
export const tailwindConfig = {
  version: "4.0",
  features: {
    cssVariables: true,
    containerQueries: true,
    cascadeLayers: true,
    lightningCSS: true
  },
  migration: {
    autoConvert: true,
    preserveComments: true
  }
};
```

## CSS-First Configuration

Tailwind v4 uses CSS for configuration:

```css
/* app.css */
@import "tailwindcss";

@theme {
  --font-display: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  
  --color-primary-50: oklch(0.97 0.02 250);
  --color-primary-100: oklch(0.93 0.04 250);
  --color-primary-500: oklch(0.55 0.18 250);
  --color-primary-600: oklch(0.48 0.20 250);
  --color-primary-900: oklch(0.25 0.12 250);
  
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;
  
  --radius-4xl: 2rem;
  
  --shadow-soft: 0 2px 15px -3px rgb(0 0 0 / 0.08);
  --shadow-glow: 0 0 20px rgb(var(--color-primary-500) / 0.3);
  
  --breakpoint-3xl: 1920px;
}
```

## Container Queries Pattern

Implement component-based responsive design:

```tsx
export function ResponsiveCard({ title, content }: CardProps) {
  return (
    <div className="@container">
      <article className="
        flex flex-col gap-4 p-4
        @sm:flex-row @sm:gap-6
        @md:p-6
        @lg:gap-8
        bg-white rounded-xl shadow-soft
      ">
        <div className="
          w-full aspect-video
          @sm:w-1/3 @sm:aspect-square
          @lg:w-1/4
          bg-gray-100 rounded-lg overflow-hidden
        ">
          <img src="/placeholder.jpg" alt="" className="w-full h-full object-cover" />
        </div>
        
        <div className="flex-1 space-y-2 @md:space-y-4">
          <h3 className="
            text-lg font-semibold
            @sm:text-xl
            @lg:text-2xl
            text-gray-900
          ">
            {title}
          </h3>
          <p className="
            text-sm text-gray-600
            @sm:text-base
            @lg:text-lg
            line-clamp-3
          ">
            {content}
          </p>
        </div>
      </article>
    </div>
  );
}
```

## 3D Transform Utilities

Create immersive 3D effects:

```tsx
export function Card3D({ children }: { children: React.ReactNode }) {
  return (
    <div className="group perspective-1000">
      <div className="
        transform-style-3d
        transition-transform duration-500 ease-out
        group-hover:rotate-y-12 group-hover:rotate-x-6
        group-hover:translate-z-20
        bg-white rounded-2xl shadow-xl
        p-6
      ">
        <div className="
          transform-style-3d
          translate-z-30
          transition-transform duration-500
          group-hover:translate-z-50
        ">
          {children}
        </div>
      </div>
    </div>
  );
}
```

## Native Cascade Layers

Organize styles with cascade layers:

```css
@layer theme, base, components, utilities;

@layer theme {
  :root {
    --color-background: white;
    --color-foreground: black;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --color-background: black;
      --color-foreground: white;
    }
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700;
  }
}
```

## Best Practices

Follow these guidelines for Tailwind v4:

1. **Use CSS-first config** - Leverage native CSS features
2. **Adopt container queries** - Build truly responsive components
3. **Utilize OKLCH colors** - Better color manipulation
4. **Embrace cascade layers** - Control specificity properly
5. **Use CSS variables** - Enable runtime theming
6. **Optimize with Lightning CSS** - Faster build times

Google Antigravity IDE provides intelligent class suggestions and automatic v3 to v4 migration assistance for seamless upgrades.