Tailwind Design System

Tailwind Design System

Build consistent, scalable UI with Tailwind CSS.

Component Patterns

Button variants

<!-- Primary -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Primary
</button>

<!-- Secondary -->
<button class="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg hover:bg-gray-200 border border-gray-300">
  Secondary
</button>

<!-- Destructive -->
<button class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">
  Delete
</button>

<!-- Ghost -->
<button class="text-gray-600 px-4 py-2 rounded-lg hover:bg-gray-100">
  Ghost
</button>

Card

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
  <h3 class="text-lg font-semibold text-gray-900">Title</h3>
  <p class="mt-2 text-gray-600">Description text here.</p>
</div>

Input

<label class="block">
  <span class="text-sm font-medium text-gray-700">Email</span>
  <input type="email" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 placeholder:text-gray-400" placeholder="you@example.com" />
</label>

Responsive Design

<!-- Mobile-first: stack → side by side → 3 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Hide on mobile, show on desktop -->
<nav class="hidden md:flex gap-4">...</nav>

<!-- Mobile menu, hidden on desktop -->
<nav class="flex md:hidden">...</nav>

Dark Mode

<!-- Toggle with class strategy -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-gray-900 dark:text-white">Heading</h1>
  <p class="text-gray-600 dark:text-gray-400">Body text</p>
  <button class="bg-blue-600 dark:bg-blue-500 text-white">Action</button>
</div>

// Toggle dark mode
document.documentElement.classList.toggle('dark');

// Respect system preference
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
}

Custom Theme (tailwind.config)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',
      },
    },
  },
};

Animation

<!-- Fade in -->
<div class="animate-fade-in">Content</div>

<!-- Slide up -->
<div class="animate-in slide-in-from-bottom-4 duration-300">Content</div>

<!-- Pulse loading -->
<div class="animate-pulse bg-gray-200 h-4 rounded w-3/4"></div>

<!-- Skeleton loader -->
<div class="space-y-3 animate-pulse">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>

Notes

• Mobile-first: start with base styles, add md: and lg: for larger screens.
• Use @apply sparingly — it defeats the purpose of utility classes. Use it only in component libraries.
• Design tokens (colors, spacing, fonts) belong in tailwind.config.js, not hardcoded in classes.
• Use group and peer for parent/sibling-based styling instead of JavaScript.
• Tailwind v4 uses CSS-first configuration. Check your version.