JavaScript
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        },
        neutral: {
          50: '#fafafa',
          500: '#737373',
          900: '#171717'
        }
      },
      fontFamily: {
        display: ['Inter', 'sans-serif'],
        body: ['Inter', 'sans-serif']
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem'
      }
    }
  },
  plugins: [
    require('./plugins/design-tokens')
  ]
}

Progress:

• Extract design tokens from Figma variables
• Map color palette with semantic naming
• Configure typography scale and font families
• Set up spacing/sizing scale
• Implement dark mode strategy
• Create component extraction rules
• Build custom plugins for complex tokens
• Test responsive behavior
• Document utility usage patterns

1. Design Token Extraction

Map Figma variables directly to Tailwind config:

JavaScript
// Design tokens structure matching Figma
const tokens = {
  colors: {
    // Semantic colors (not HSL values)
    brand: {
      primary: '#2563eb',
      secondary: '#7c3aed',
      accent: '#f59e0b'
    },
    semantic: {
      success: '#059669',
      warning: '#d97706',
      error: '#dc2626',
      info: '#2563eb'
    },
    neutral: {
      0: '#ffffff',
      50: '#f9fafb',
      100: '#f3f4f6',
      // ... continue scale
      950: '#030712'
    }
  },
  typography: {
    fontFamily: {
      display: ['Poppins', 'sans-serif'],
      body: ['Inter', 'sans-serif'],
      mono: ['JetBrains Mono', 'monospace']
    },
    fontSize: {
      'xs': ['0.75rem', { lineHeight: '1rem' }],
      'sm': ['0.875rem', { lineHeight: '1.25rem' }],
      'base': ['1rem', { lineHeight: '1.5rem' }],
      'xl': ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }]
    }
  }
};

2. Component Extraction Strategy

Use @apply when:

• Component appears 3+ times
• Complex utility combinations
• State-dependent styling needs consistency

CSS
/* Button component with @apply */
.btn-primary {
  @apply inline-flex items-center px-4 py-2 bg-primary-500 text-white font-medium rounded-md transition-colors duration-200 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}

Keep utilities inline when:

• One-off styling
• Layout utilities (flex, grid)
• Simple single-property changes

3. Dark Mode Implementation

JavaScript
// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        background: {
          light: '#ffffff',
          dark: '#0f172a'
        },
        foreground: {
          light: '#0f172a',
          dark: '#f1f5f9'
        }
      }
    }
  }
}

HTML
<!-- Usage with dark mode -->
<div class="bg-background-light dark:bg-background-dark text-foreground-light dark:text-foreground-dark">
  Content adapts to theme
</div>

Example 1: Card Component

JavaScript
// Instead of utilities everywhere
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6">

// Extract to component
<div class="card">

CSS
.card {
  @apply bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6;
}

Example 2: Responsive Typography

HTML
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-display font-bold text-foreground-light dark:text-foreground-dark">
  Mobile-first responsive heading
</h1>

Example 3: Custom Plugin for Design Tokens

JavaScript
// plugins/design-tokens.js
const plugin = require('tailwindcss/plugin');

module.exports = plugin(function({ addUtilities, theme }) {
  const shadows = {
    '.shadow-brand': {
      'box-shadow': `0 4px 6px -1px ${theme('colors.primary.500')}40, 0 2px 4px -1px ${theme('colors.primary.500')}20`
    }
  };
  
  addUtilities(shadows);
});