<!-- ❌ Avoid: Repeating classes -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
  Save
</button>

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
  Submit
</button>

<!-- ✅ Good: Extract to component -->
<Button>Save</Button>
<Button>Submit</Button>

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

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

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }

  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold;
  }
}

<!-- Good responsive design -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card />
  <Card />
  <Card />
</div>

// React component with variants
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger'
  size?: 'sm' | 'md' | 'lg'
}

export function Button({ variant = 'primary', size = 'md' }: ButtonProps) {
  const variants = {
    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
    danger: 'bg-red-600 hover:bg-red-700 text-white'
  }

  const sizes = {
    sm: 'px-2 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  }

  return (
    <button className={`${variants[variant]} ${sizes[size]} rounded-lg`}>
      Click me
    </button>
  )
}

// WRONG - won't be detected
const color = colorName === 'red' ? 'text-red-500' : 'text-blue-500'
<div className={color}></div>

// CORRECT
<div className={colorName === 'red' ? 'text-red-500' : 'text-blue-500'}></div>

/* WRONG */
@media (min-width: 768px) {
  .custom {
    /* styles */
  }
}

/* CORRECT */
.custom {
  @apply /* base styles */;
}

@screen md {
  .custom {
    @apply /* md styles */;
  }
}

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  }
}