TailwindCSS ve DaisyUI ile Hızlı UI Geliştirme

TailwindCSS ve DaisyUI kombinasyonu ile nasıl hızlı ve güzel arayüzler geliştirebileceğinizi öğrenin

10 dk okuma
TailwindCSSDaisyUICSSUI/UXFrontend

TailwindCSS ve DaisyUI ile Hızlı UI Geliştirme

Modern web geliştirmede hız ve kalite arasındaki dengeyi kurmak her zaman zor olmuştur. TailwindCSS ve DaisyUI kombinasyonu, bu soruna mükemmel bir çözüm sunuyor. Bu yazıda, bu güçlü ikilinin nasıl kullanılacağını ve neden tercih edilmesi gerektiğini ele alacağız.

TailwindCSS Nedir?

TailwindCSS, utility-first yaklaşımı benimseyen bir CSS framework'üdür. Geleneksel CSS framework'lerinden farklı olarak, önceden tanımlanmış bileşenler yerine küçük utility class'ları sunar.

TailwindCSS'in Avantajları

  • Utility-First: Her CSS özelliği için ayrı class'lar
  • Customizable: Tamamen özelleştirilebilir design system
  • Performance: Kullanılmayan CSS'leri otomatik temizler
  • Responsive: Mobile-first responsive design
  • Developer Experience: Harika IntelliSense desteği

DaisyUI Nedir?

DaisyUI, TailwindCSS üzerine inşa edilmiş bir component library'sidir. TailwindCSS'in utility class'larını kullanarak önceden tasarlanmış bileşenler sunar.

DaisyUI'nin Avantajları

  • Semantic Class Names: btn, card, modal gibi anlamlı class'lar
  • Theme Support: 30+ hazır tema
  • TailwindCSS Uyumlu: Mevcut TailwindCSS class'larıyla birlikte kullanılabilir
  • Accessibility: ARIA standartlarına uygun
  • Lightweight: Sadece 2KB CSS

Kurulum ve Konfigürasyon

TailwindCSS Kurulumu

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

DaisyUI Ekleme

npm install -D daisyui@latest

tailwind.config.js dosyanızı güncelleyin:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark", "cupcake", "corporate"],
    darkTheme: "dark",
    base: true,
    styled: true,
    utils: true,
  },
}

Temel Bileşenler

Button Bileşeni

<!-- Temel button -->
<button class="btn">Button</button>

<!-- Farklı varyantlar -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>

<!-- Boyutlar -->
<button class="btn btn-xs">Extra Small</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-md">Medium</button>
<button class="btn btn-lg">Large</button>

<!-- Durumlar -->
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>
<button class="btn btn-disabled">Disabled</button>

Card Bileşeni

<div class="card w-96 bg-base-100 shadow-xl">
  <figure>
    <img src="/image.jpg" alt="Shoes" />
  </figure>
  <div class="card-body">
    <h2 class="card-title">
      Shoes!
      <div class="badge badge-secondary">NEW</div>
    </h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="card-actions justify-end">
      <div class="badge badge-outline">Fashion</div>
      <div class="badge badge-outline">Products</div>
    </div>
  </div>
</div>

<!-- Modal trigger -->
<label for="my-modal" class="btn">Open Modal</label>

<!-- Modal -->
<input type="checkbox" id="my-modal" class="modal-toggle" />
<div class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Congratulations!</h3>
    <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
    <div class="modal-action">
      <label for="my-modal" class="btn">Yay!</label>
    </div>
  </div>
</div>

Tema Sistemi

DaisyUI'nin en güçlü özelliklerinden biri tema sistemidir:

CSS Variables ile Tema

[data-theme="mytheme"] {
  --primary: #570df8;
  --primary-focus: #4506cb;
  --primary-content: #ffffff;
  --secondary: #f000b8;
  --secondary-focus: #bd0091;
  --secondary-content: #ffffff;
  --accent: #37cdbe;
  --accent-focus: #2aa79b;
  --accent-content: #ffffff;
  --neutral: #3d4451;
  --neutral-focus: #2a2e37;
  --neutral-content: #ffffff;
  --base-100: #ffffff;
  --base-200: #f9fafb;
  --base-300: #d1d5db;
  --base-content: #1f2937;
}

JavaScript ile Tema Değiştirme

// Tema değiştirme fonksiyonu
function changeTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme)
  localStorage.setItem('theme', theme)
}

// Sayfa yüklendiğinde tema ayarlama
const savedTheme = localStorage.getItem('theme') || 'light'
changeTheme(savedTheme)

Vue.js ile Entegrasyon

Composable ile Tema Yönetimi

// composables/useTheme.js
import { ref, onMounted } from 'vue'

export function useTheme() {
  const currentTheme = ref('light')
  const themes = [
    'light', 'dark', 'cupcake', 'bumblebee', 
    'emerald', 'corporate', 'synthwave', 'retro'
  ]
  
  const setTheme = (theme) => {
    currentTheme.value = theme
    document.documentElement.setAttribute('data-theme', theme)
    localStorage.setItem('theme', theme)
  }
  
  const toggleTheme = () => {
    const newTheme = currentTheme.value === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
  }
  
  onMounted(() => {
    const savedTheme = localStorage.getItem('theme') || 'light'
    setTheme(savedTheme)
  })
  
  return {
    currentTheme,
    themes,
    setTheme,
    toggleTheme
  }
}

Vue Bileşeni Örneği

<template>
  <div class="navbar bg-base-100">
    <div class="navbar-start">
      <div class="dropdown">
        <label tabindex="0" class="btn btn-ghost lg:hidden">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path>
          </svg>
        </label>
        <ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 3</a></li>
        </ul>
      </div>
      <a class="btn btn-ghost normal-case text-xl">daisyUI</a>
    </div>
    <div class="navbar-center hidden lg:flex">
      <ul class="menu menu-horizontal p-0">
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    <div class="navbar-end">
      <button @click="toggleTheme" class="btn btn-ghost">
        <svg v-if="currentTheme === 'light'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
        </svg>
        <svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { useTheme } from '@/composables/useTheme'

const { currentTheme, toggleTheme } = useTheme()
</script>

Performance Optimizasyonu

PurgeCSS ile Optimizasyon

TailwindCSS otomatik olarak kullanılmayan CSS'leri temizler:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
}

Bundle Size Analizi

# Bundle analyzer ile analiz
npm install --save-dev @next/bundle-analyzer

Best Practices

  1. Semantic Class Names: DaisyUI class'larını TailwindCSS utility'leri ile kombine edin
  2. Component Abstraction: Tekrar eden UI pattern'leri için Vue bileşenleri oluşturun
  3. Theme Consistency: Tutarlı bir design system için tema değişkenlerini kullanın
  4. Performance: Sadece ihtiyacınız olan bileşenleri import edin
  5. Accessibility: ARIA attribute'larını unutmayın

Sonuç

TailwindCSS ve DaisyUI kombinasyonu, hızlı ve kaliteli UI geliştirme için mükemmel bir çözüm sunar. Utility-first yaklaşımın esnekliği ile hazır bileşenlerin hızını birleştirerek, hem developer experience'ı hem de end-user experience'ı optimize eder.

Faydalı Kaynaklar

Bu yazıda TailwindCSS ve DaisyUI'nin güçlü kombinasyonunu ele aldık. Kendi projelerinizde deneyerek bu teknolojilerin avantajlarını keşfedebilirsiniz.