Tailwind CSS ile Modern Web Tasarımı: Utility-First Yaklaşım

Tailwind CSS Nedir?

Tailwind CSS, utility-first CSS framework'üdür. Hazır class'lar kullanarak hızlıca custom tasarımlar oluşturabilirsiniz.

Neden Tailwind?

• No Custom CSS: Utility class'larla her şey yapılabilir
• Responsive: sm:, md:, lg:, xl: prefix'leri
• Dark Mode: dark: prefix ile kolay
• Production Size: PurgeCSS ile küçük bundle
• Customizable: tailwind.config.js ile tam kontrol

Kurulum

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

# Laravel Vite
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          600: '#0284c7',
        }
      }
    },
  },
  plugins: [],
}

Temel Kullanım

Layout

<div class="flex items-center justify-between p-4">
  <div class="w-1/2">Sol</div>
  <div class="w-1/2">Sağ</div>
</div>

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive

<!-- Mobile: 1 col, Tablet: 2 col, Desktop: 4 col -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  ...
</div>

Dark Mode

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

Component Örneği

<!-- Card Component -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
  <img src="image.jpg" class="w-full h-48 object-cover">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">Başlık</h3>
    <p class="text-gray-600 mb-4">Açıklama metni...</p>
    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
      Detaylar
    </button>
  </div>
</div>

@apply ile Custom Classes

/* app.css */
@layer components {
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition;
  }

  .card {
    @apply bg-white rounded-lg shadow-lg p-6;
  }
}

Plugins

npm install @tailwindcss/forms @tailwindcss/typography

// tailwind.config.js
plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
]

Bootstrap'ten Geçiş

Sonuç

Tailwind CSS, utility-first yaklaşımıyla hızlı ve maintainable CSS yazmanızı sağlar. Öğrenme eğrisi kısa, verimlilik yüksek.