Advanced Tailwind CSS Techniques

# Advanced Tailwind CSS Techniques for Google Antigravity

Master advanced Tailwind CSS patterns in your Google Antigravity projects. This guide covers custom plugins, dynamic theming, component patterns, and performance optimization strategies.

## Custom Theme Configuration

Extend Tailwind with custom design tokens:

```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: {
        primary: {
          50: "hsl(var(--primary-50) / <alpha-value>)",
          100: "hsl(var(--primary-100) / <alpha-value>)",
          500: "hsl(var(--primary-500) / <alpha-value>)",
          600: "hsl(var(--primary-600) / <alpha-value>)",
          900: "hsl(var(--primary-900) / <alpha-value>)",
        },
        surface: {
          DEFAULT: "hsl(var(--surface) / <alpha-value>)",
          elevated: "hsl(var(--surface-elevated) / <alpha-value>)",
        },
      },
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        mono: ["var(--font-mono)", "Menlo", "monospace"],
      },
      spacing: {
        "4.5": "1.125rem",
        "18": "4.5rem",
        "88": "22rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
      animation: {
        "fade-in": "fadeIn 0.3s ease-out",
        "slide-up": "slideUp 0.4s ease-out",
        "slide-down": "slideDown 0.4s ease-out",
        "scale-in": "scaleIn 0.2s ease-out",
        shimmer: "shimmer 2s linear infinite",
        pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        slideUp: {
          "0%": { opacity: "0", transform: "translateY(10px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        slideDown: {
          "0%": { opacity: "0", transform: "translateY(-10px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        scaleIn: {
          "0%": { opacity: "0", transform: "scale(0.95)" },
          "100%": { opacity: "1", transform: "scale(1)" },
        },
        shimmer: {
          "0%": { backgroundPosition: "-200% 0" },
          "100%": { backgroundPosition: "200% 0" },
        },
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        shimmer: "linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)",
      },
      boxShadow: {
        glow: "0 0 20px rgba(99, 102, 241, 0.3)",
        "glow-lg": "0 0 40px rgba(99, 102, 241, 0.4)",
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/container-queries"),
  ],
};

export default config;
```

## Custom Tailwind Plugin

Create reusable utility plugins:

```typescript
// tailwind.config.ts (continued)
plugins: [
  // Text balance plugin
  plugin(({ addUtilities }) => {
    addUtilities({
      ".text-balance": {
        "text-wrap": "balance",
      },
      ".text-pretty": {
        "text-wrap": "pretty",
      },
    });
  }),
  
  // Glass morphism plugin
  plugin(({ addComponents, theme }) => {
    addComponents({
      ".glass": {
        background: "rgba(255, 255, 255, 0.05)",
        backdropFilter: "blur(10px)",
        border: "1px solid rgba(255, 255, 255, 0.1)",
      },
      ".glass-dark": {
        background: "rgba(0, 0, 0, 0.5)",
        backdropFilter: "blur(10px)",
        border: "1px solid rgba(255, 255, 255, 0.05)",
      },
    });
  }),
  
  // Grid pattern plugin
  plugin(({ addUtilities }) => {
    addUtilities({
      ".bg-grid": {
        backgroundImage: `linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                          linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)`,
        backgroundSize: "40px 40px",
      },
      ".bg-dots": {
        backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px)",
        backgroundSize: "20px 20px",
      },
    });
  }),
  
  // Scrollbar styling
  plugin(({ addUtilities }) => {
    addUtilities({
      ".scrollbar-thin": {
        scrollbarWidth: "thin",
        "&::-webkit-scrollbar": {
          width: "8px",
          height: "8px",
        },
        "&::-webkit-scrollbar-track": {
          background: "transparent",
        },
        "&::-webkit-scrollbar-thumb": {
          background: "rgba(255, 255, 255, 0.2)",
          borderRadius: "4px",
        },
        "&::-webkit-scrollbar-thumb:hover": {
          background: "rgba(255, 255, 255, 0.3)",
        },
      },
      ".scrollbar-none": {
        scrollbarWidth: "none",
        "&::-webkit-scrollbar": {
          display: "none",
        },
      },
    });
  }),
],
```

## Component Patterns with CVA

Create variant-based components:

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

const buttonVariants = cva(
  // Base styles
  [
    "inline-flex items-center justify-center gap-2",
    "rounded-lg font-medium transition-all duration-200",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
    "disabled:pointer-events-none disabled:opacity-50",
  ],
  {
    variants: {
      variant: {
        primary: [
          "bg-gradient-to-r from-primary-500 to-primary-600",
          "text-white shadow-lg shadow-primary-500/25",
          "hover:shadow-xl hover:shadow-primary-500/30",
          "hover:-translate-y-0.5",
          "focus-visible:ring-primary-500",
        ],
        secondary: [
          "bg-surface-elevated text-white",
          "border border-white/10",
          "hover:bg-white/10",
          "focus-visible:ring-white/20",
        ],
        outline: [
          "border-2 border-primary-500 text-primary-500",
          "hover:bg-primary-500/10",
          "focus-visible:ring-primary-500",
        ],
        ghost: [
          "text-gray-400",
          "hover:text-white hover:bg-white/5",
          "focus-visible:ring-white/20",
        ],
        destructive: [
          "bg-red-500 text-white",
          "hover:bg-red-600",
          "focus-visible:ring-red-500",
        ],
      },
      size: {
        sm: "h-8 px-3 text-sm",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-6 text-base",
        xl: "h-14 px-8 text-lg",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
    },
  }
);

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

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, isLoading, children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={cn(buttonVariants({ variant, size }), className)}
        disabled={isLoading || props.disabled}
        {...props}
      >
        {isLoading && (
          <svg
            className="h-4 w-4 animate-spin"
            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>
        )}
        {children}
      </button>
    );
  }
);
```

## Container Queries

Use modern container queries:

```tsx
// Card with container queries
export function ResponsiveCard({ children }: { children: React.ReactNode }) {
  return (
    <div className="@container">
      <div className="
        p-4 
        @sm:p-6 
        @lg:p-8
        flex flex-col 
        @md:flex-row 
        @md:items-center
        gap-4 
        @lg:gap-6
      ">
        {children}
      </div>
    </div>
  );
}
```

Google Antigravity generates sophisticated Tailwind CSS configurations with custom plugins, design systems, and component patterns for beautiful, maintainable UIs.