Tailwind CSS ile Hızlı UI Geliştirme

Tailwind CSS, utility-first yaklaşımıyla CSS yazma şeklini değiştiren bir framework'tür. Hazır bileşen kütüphaneleri yerine düşük seviyeli utility sınıfları sunarak, tamamen özelleştirilebilir tasarımlar oluşturmanızı sağlar. Tailwind, 2024'te en popüler CSS framework'ü konumundadır.

Utility-First Nedir?

Geleneksel CSS'te özel sınıflar oluştururken, Tailwind'de önceden tanımlanmış utility sınıflarını birleştirirsiniz:

Geleneksel CSS

/* styles.css */
.card {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* HTML */
<div class="card">...</div>

Tailwind CSS

<div class="bg-white rounded-lg p-6 shadow-md">...</div>

Kurulum

# npm ile kurulum
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# CSS dosyasına ekle
@tailwind base;
@tailwind components;
@tailwind utilities;

Temel Utility Sınıfları

Spacing (Margin & Padding)

m-4      /* margin: 1rem */
p-6      /* padding: 1.5rem */
mx-auto  /* margin-left/right: auto */
py-2     /* padding-top/bottom: 0.5rem */
mt-8     /* margin-top: 2rem */

Typography

text-xl          /* font-size: 1.25rem */
font-bold        /* font-weight: 700 */
text-gray-600    /* color: #4B5563 */
leading-relaxed  /* line-height: 1.625 */
tracking-wide    /* letter-spacing: 0.025em */

Flexbox & Grid

flex justify-center items-center
grid grid-cols-3 gap-4
flex-col md:flex-row

Responsive Design

/* Mobile first */
<div class="w-full md:w-1/2 lg:w-1/3">
  ...
</div>

/* Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px) */

Dark Mode

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

// HTML
<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-900 dark:text-white">...</p>
</div>

Custom Yapılandırma

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      },
    },
  },
}

@apply ile Bileşen Sınıfları

/* styles.css */
@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
    @apply hover:bg-blue-700 transition-colors;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

Animasyonlar

<button class="hover:scale-105 transition-transform duration-200">
  Hover Me
</button>

<div class="animate-pulse bg-gray-300 h-4 rounded"></div>
<div class="animate-spin h-5 w-5 border-2 border-blue-500"></div>

Plugins

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
}

Tailwind UI & Bileşen Kütüphaneleri

• Tailwind UI: Official premium bileşenler
• daisyUI: Ücretsiz bileşen kütüphanesi
• Headless UI: Unstyled, accessible bileşenler
• Flowbite: Tailwind bileşenleri

Production Optimizasyonu

/* Otomatik: Kullanılmayan sınıflar purge edilir */
/* Build boyutu: ~10KB (gzip) */

# Build
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

VS Code Eklentisi

Tailwind CSS IntelliSense eklentisi:

• Autocomplete
• Linting
• Hover preview
• Class sorting

Tailwind CSS, hızlı prototipleme ve production-ready UI geliştirme için ideal bir araçtır. Öğrenme eğrisi başlangıçta dik olsa da, verimlilik kazanımları buna değer.