Tailwind CSS Mimarisi: Scale Edilebilir Design Systems

Tailwind CSS, utility-first yaklaşımıyla CSS yazma şeklimizi değiştirdi. Ancak büyük projelerde "class soup" problemine dönüşebilir. Bu yazıda, Tailwind'i scale edilebilir bir mimaride nasıl kullanacağınızı anlatıyorum.

1. Design Tokens ile Başlayın

Tailwind config, design system'inizin tek kaynağı olmalı. Renkler, spacing, typography gibi tüm token'ları burada tanımlayın:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Brand colors
        primary: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
        // Semantic colors
        surface: { DEFAULT: '#141414', light: '#F5F5F5' },
        border: { DEFAULT: '#262626', light: '#E5E5E5' },
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
    },
  },
}

2. Component Extraction

Her yerde aynı class组合'larını tekrar etmek yerine, component'lere extract edin:

// Kötü — her yerde tekrar
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Click me
</button>

// İyi — component olarak
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary-500 text-white rounded-lg 
           hover:bg-primary-600 focus:ring-2 focus:ring-primary-500 
           focus:ring-offset-2 transition-colors;
  }
}

// Usage
<button class="btn-primary">Click me</button>

3. @layer Direktifi Kullanın

Tailwind'in layer sistemi, CSS specificity sorunlarını çözer:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Base styles — en düşük specificity */
  h1 { @apply text-3xl font-bold text-neutral-900 dark:text-white; }
  a { @apply text-primary-500 hover:text-primary-600; }
}

@layer components {
  /* Component styles — orta specificity */
  .card { @apply rounded-xl border bg-card p-6; }
  .input { @apply px-3 py-2 rounded-lg border bg-surface; }
}

@layer utilities {
  /* Utility overrides — en yüksek specificity */
  .text-balance { text-wrap: balance; }
  .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
}

4. Dark Mode Stratejisi

darkMode: 'class' kullanarak manuel toggle yapın:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

// Toggle fonksiyonu
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme', 
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

// Init
if (localStorage.theme === 'dark' || 
    (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
}

5. Responsive Design Pattern

Mobile-first yaklaşımını tutarlı uygulayın:

// Kötü — desktop-first
<div class="hidden md:block lg:flex">

// İyi — mobile-first
<div class="flex md:hidden lg:flex">

// Grid pattern
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- Cards -->
</div>

6. Custom Plugins

Tekrar eden pattern'leri plugin olarak yazın:

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addComponents, theme }) {
      addComponents({
        '.card-glow': {
          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
          '&:hover': {
            transform: 'translateY(-4px)',
            boxShadow: `0 20px 40px ${theme('colors.black')}40`,
            borderColor: theme('colors.primary.500'),
          },
        },
      });
    }),
  ],
}

7. Bundle Size Optimizasyonu

Production build'de unused CSS'i temizleyin:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  safelist: [
    // Dinamik class'lar için
    { pattern: /^bg-(red|green|blue)-500$/ },
  ],
}

Bu konfigürasyon, 50KB'lık Tailwind bundle'ını 8KB'a düşürdü.

Sonuç

Tailwind CSS, doğru mimariyle scale edilebilir bir design system'in temelini oluşturabilir. Design tokens, component extraction, layer kullanımı ve bundle optimizasyonu — bu 4 pilier, maintainable Tailwind CSS mimarinizin temeli olacak.