Tailwind CSS Design System

# Tailwind CSS Design System for Google Antigravity

Build scalable design systems with Tailwind CSS using Google Antigravity's Gemini 3 engine. This guide covers custom theming, component patterns, responsive design, and plugin development.

## Theme Configuration

```typescript
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import plugin from 'tailwindcss/plugin';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          50: 'hsl(var(--brand-50) / <alpha-value>)',
          100: 'hsl(var(--brand-100) / <alpha-value>)',
          200: 'hsl(var(--brand-200) / <alpha-value>)',
          300: 'hsl(var(--brand-300) / <alpha-value>)',
          400: 'hsl(var(--brand-400) / <alpha-value>)',
          500: 'hsl(var(--brand-500) / <alpha-value>)',
          600: 'hsl(var(--brand-600) / <alpha-value>)',
          700: 'hsl(var(--brand-700) / <alpha-value>)',
          800: 'hsl(var(--brand-800) / <alpha-value>)',
          900: 'hsl(var(--brand-900) / <alpha-value>)',
          950: 'hsl(var(--brand-950) / <alpha-value>)',
        },
        surface: {
          DEFAULT: 'hsl(var(--surface) / <alpha-value>)',
          secondary: 'hsl(var(--surface-secondary) / <alpha-value>)',
          tertiary: 'hsl(var(--surface-tertiary) / <alpha-value>)',
        },
        foreground: {
          DEFAULT: 'hsl(var(--foreground) / <alpha-value>)',
          muted: 'hsl(var(--foreground-muted) / <alpha-value>)',
        },
      },
      fontFamily: {
        sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
        mono: ['var(--font-mono)', 'monospace'],
      },
      fontSize: {
        '2xs': ['0.625rem', { lineHeight: '0.75rem' }],
      },
      spacing: {
        '4.5': '1.125rem',
        '18': '4.5rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      boxShadow: {
        'inner-sm': 'inset 0 1px 2px 0 rgb(0 0 0 / 0.05)',
        glow: '0 0 20px rgb(var(--brand-500) / 0.3)',
      },
      animation: {
        'fade-in': 'fade-in 0.3s ease-out',
        'slide-up': 'slide-up 0.3s ease-out',
        'spin-slow': 'spin 3s linear infinite',
      },
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'slide-up': {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/container-queries'),
  ],
};

export default config;
```

## CSS Variables Setup

```css
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --brand-50: 210 100% 97%;
    --brand-100: 210 100% 94%;
    --brand-200: 210 100% 86%;
    --brand-300: 210 100% 74%;
    --brand-400: 210 100% 60%;
    --brand-500: 210 100% 50%;
    --brand-600: 210 100% 42%;
    --brand-700: 210 100% 34%;
    --brand-800: 210 100% 26%;
    --brand-900: 210 100% 18%;
    --brand-950: 210 100% 10%;

    --surface: 0 0% 100%;
    --surface-secondary: 210 20% 98%;
    --surface-tertiary: 210 20% 96%;
    --foreground: 210 20% 10%;
    --foreground-muted: 210 10% 40%;
  }

  .dark {
    --surface: 210 20% 8%;
    --surface-secondary: 210 20% 12%;
    --surface-tertiary: 210 20% 16%;
    --foreground: 210 20% 98%;
    --foreground-muted: 210 10% 60%;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-primary {
    @apply btn bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-brand-500;
  }

  .btn-secondary {
    @apply btn bg-surface-secondary text-foreground hover:bg-surface-tertiary border border-gray-200 dark:border-gray-700;
  }

  .btn-ghost {
    @apply btn text-foreground hover:bg-surface-secondary;
  }

  .input {
    @apply w-full rounded-lg border border-gray-300 bg-surface px-3 py-2 text-sm text-foreground placeholder:text-foreground-muted focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700;
  }

  .card {
    @apply rounded-xl border border-gray-200 bg-surface p-6 shadow-sm dark:border-gray-800;
  }
}
```

## Component Variants with CVA

```typescript
// components/ui/button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { forwardRef } from 'react';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-brand-500',
        secondary: 'bg-surface-secondary text-foreground hover:bg-surface-tertiary border border-gray-200 dark:border-gray-700',
        ghost: 'text-foreground hover:bg-surface-secondary',
        destructive: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500',
        link: 'text-brand-600 underline-offset-4 hover:underline',
      },
      size: {
        sm: 'h-8 px-3 text-xs',
        md: 'h-10 px-4',
        lg: 'h-12 px-6 text-base',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
);

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  isLoading?: boolean;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, isLoading, children, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size }), className)}
        ref={ref}
        disabled={isLoading || props.disabled}
        {...props}
      >
        {isLoading ? (
          <>
            <svg
              className="mr-2 h-4 w-4 animate-spin"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
            >
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
              />
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
              />
            </svg>
            Loading...
          </>
        ) : (
          children
        )}
      </button>
    );
  }
);

Button.displayName = 'Button';

export { Button, buttonVariants };
```

## Responsive Layout Patterns

```tsx
// components/layouts/Dashboard.tsx
export function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-surface">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-gray-200 bg-surface/80 backdrop-blur-sm dark:border-gray-800">
        <div className="container flex h-16 items-center justify-between px-4">
          <nav className="hidden md:flex md:gap-6">{/* Nav items */}</nav>
        </div>
      </header>

      {/* Main content with responsive sidebar */}
      <div className="container flex gap-6 px-4 py-6">
        <aside className="hidden w-64 shrink-0 lg:block">
          <nav className="sticky top-20 space-y-1">{/* Sidebar */}</nav>
        </aside>

        <main className="flex-1 @container">{children}</main>

        <aside className="hidden w-72 shrink-0 xl:block">
          {/* Right sidebar */}
        </aside>
      </div>
    </div>
  );
}
```

## Best Practices

Google Antigravity's Gemini 3 engine recommends these Tailwind patterns: Use CSS variables with HSL for dynamic theming. Implement class-variance-authority for component variants. Create reusable component classes in the components layer. Use container queries for component-level responsiveness. Avoid arbitrary values when design tokens exist.