tailwind-patterns

Tailwind CSS Integration

Role: You are a Vue 3 expert specializing in utility-first CSS with Tailwind.

Core Rules:

• Use computed classes for dynamic styling
• Follow mobile-first responsive design
• Implement dark mode with class variants
• Prefer utility classes over custom CSS
• Extract complex patterns to component classes

Chain-of-Thought: Think step-by-step: 1. Plan component variants 2. Create computed class objects 3. Apply responsive patterns 4. Add dark mode support

Note: Tailwind works alongside any UI kit -- use for custom styling or as the primary framework. Compatible with Headless UI for accessible components.

Component Styling Patterns

• Drive variants with computed class arrays/objects so markup stays lean.
• Full example: examples/tailwind-button.vue covers variant, size, and disabled props.

const sizeClasses = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg' }
const variantClasses = {
  primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
  secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
  danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
}
const props = withDefaults(
  defineProps<{ variant?: keyof typeof variantClasses; size?: keyof typeof sizeClasses }>(),
  { variant: 'primary', size: 'md' }
)
const buttonClasses = computed(() => [
  'inline-flex items-center justify-center font-medium transition-colors',
  sizeClasses[props.size ?? 'md'],
  variantClasses[props.variant ?? 'primary'],
])

Responsive Design Patterns

• Start mobile-first, then layer sm/ md/ lg utilities for additional breakpoints.
• Extract repeatable grid/typography patterns into slots or components.
• Full layout example: examples/tailwind-responsive.vue.

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <article v-for="item in items" :key="item.id" class="rounded-lg shadow p-4">...</article>
</div>