Tailwind Patterns

Tailwind Patterns

Core Approach

• Utility-first: compose classes, don't write custom CSS
• Extract components, not classes (use React components, not @apply)
• Consistent spacing/color via design tokens

Component Patterns

Button Variants

const buttonVariants = {
  primary: 'bg-blue-600 hover:bg-blue-700 text-white',
  secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-900',
  danger: 'bg-red-600 hover:bg-red-700 text-white',
  ghost: 'hover:bg-gray-100 text-gray-700',
}

interface ButtonProps {
  variant?: keyof typeof buttonVariants
  size?: 'sm' | 'md' | 'lg'
  children: React.ReactNode
}

export const Button = ({ variant = 'primary', size = 'md', children }: ButtonProps) => {
  const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' }
  return (
    
      {children}
    
  )
}

Responsive Design

// Mobile-first approach

Dark Mode

// Use dark: prefix

  
    Secondary text
  

Design Tokens (v4)

/* In CSS — v4 uses CSS variables */
@theme {
  --color-primary: oklch(0.6 0.2 250);
  --color-primary-foreground: oklch(1 0 0);
  --spacing-page: 1.5rem;
  --radius-card: 0.75rem;
}

// Use in components

Common Patterns

Card

Form Input

Skeleton Loader

Forbidden Patterns

// ❌ Never use @apply for component styles
.btn { @apply px-4 py-2; } // extract React component instead

// ❌ Arbitrary values when token exists
 // use text-blue-500

// ❌ Inline styles with Tailwind

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: sabahattink
• Source: sabahattink/antigravity-fullstack-hq
• License: MIT
• Homepage: https://github.com/sabahattink/antigravity-fullstack-hq

Install and usage instructions live in the source repository linked above.