Tailwind UI, modern web arayüzleri geliştirmek için kullanılan güçlü bir komponent kütüphanesidir. Tailwind CSS'in yaratıcıları tarafından geliştirilen bu kütüphane, hazır komponentler ve tasarım kalıpları sunarak geliştirme sürecini hızlandırır. Bu yazıda, Tailwind UI kullanarak modern web arayüzleri geliştirmenin inceliklerini ele alacağız.
Tailwind UI Nedir?
Tailwind UI, Tailwind CSS üzerine inşa edilmiş, profesyonel tasarım kalıpları ve komponentler sunan bir kütüphanedir. Öne çıkan özellikleri:
- Yüksek kaliteli, hazır komponentler
- Responsive tasarım desteği
- Dark mode uyumluluğu
- Erişilebilirlik standartlarına uygunluk
- Özelleştirilebilir tasarım sistemi
- Modern UI/UX prensipleri
Temel Komponentler ve Kullanımları
1. Navigation Bar
Modern ve responsive bir navigation bar örneği:
// components/Navbar.tsx
import { useState } from 'react';
import { Dialog } from '@headlessui/react';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
export function Navbar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="bg-white shadow-sm">
<nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" aria-label="Global">
<div className="flex h-16 items-center justify-between">
<div className="flex lg:flex-1">
<a href="/" className="-m-1.5 p-1.5">
<span className="sr-only">Your Company</span>
<img
className="h-8 w-auto"
src="/logo.svg"
alt="Company Logo"
/>
</a>
</div>
{/* Mobile menu button */}
<div className="flex lg:hidden">
<button
type="button"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(true)}
>
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
{/* Desktop menu */}
<div className="hidden lg:flex lg:gap-x-12">
<a href="/features" className="text-sm font-semibold leading-6 text-gray-900">
Özellikler
</a>
<a href="/pricing" className="text-sm font-semibold leading-6 text-gray-900">
Fiyatlandırma
</a>
<a href="/about" className="text-sm font-semibold leading-6 text-gray-900">
Hakkımızda
</a>
<a href="/contact" className="text-sm font-semibold leading-6 text-gray-900">
İletişim
</a>
</div>
{/* Desktop CTA */}
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="/login" className="text-sm font-semibold leading-6 text-gray-900">
Giriş Yap <span aria-hidden="true">→</span>
</a>
</div>
</div>
</nav>
{/* Mobile menu */}
<Dialog as="div" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
<Dialog.Panel className="fixed inset-0 z-10 overflow-y-auto bg-white px-6 py-6 lg:hidden">
<div className="flex items-center justify-between">
<a href="/" className="-m-1.5 p-1.5">
<span className="sr-only">Your Company</span>
<img
className="h-8 w-auto"
src="/logo.svg"
alt="Company Logo"
/>
</a>
<button
type="button"
className="-m-2.5 rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(false)}
>
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6">
<a
href="/features"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
Özellikler
</a>
<a
href="/pricing"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
Fiyatlandırma
</a>
<a
href="/about"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
Hakkımızda
</a>
<a
href="/contact"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
İletişim
</a>
</div>
<div className="py-6">
<a
href="/login"
className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
Giriş Yap
</a>
</div>
</div>
</div>
</Dialog.Panel>
</Dialog>
</header>
);
}
2. Hero Section
Etkileyici bir hero section örneği:
// components/Hero.tsx
export function Hero() {
return (
<div className="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20">
<div className="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-40">
<div className="px-6 lg:px-0 lg:pt-4">
<div className="mx-auto max-w-2xl">
<div className="max-w-lg">
<div className="mt-24 sm:mt-32 lg:mt-16">
<a href="#" className="inline-flex space-x-6">
<span className="rounded-full bg-indigo-600/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-600/10">
Yeni Özellik
</span>
</a>
</div>
<h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
Modern web geliştirme artık daha kolay
</h1>
<p className="mt-6 text-lg leading-8 text-gray-600">
Tailwind UI ile profesyonel web arayüzleri geliştirin. Hazır komponentler ve tasarım kalıpları ile zamandan tasarruf edin.
</p>
<div className="mt-10 flex items-center gap-x-6">
<a
href="#"
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Hemen Başla
</a>
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Daha Fazla Bilgi <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
<div className="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen">
<div className="absolute inset-y-0 right-1/2 -z-10 -mr-10 w-[200%] skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 md:-mr-20 lg:-mr-36" aria-hidden="true" />
<div className="shadow-lg md:rounded-3xl">
<div className="bg-indigo-500 [clip-path:inset(0)] md:[clip-path:inset(0_round_theme(borderRadius.3xl))]">
<div className="absolute -inset-y-px left-1/2 -z-10 ml-10 w-[200%] skew-x-[-30deg] bg-indigo-100 opacity-20 ring-1 ring-inset ring-white md:ml-20 lg:ml-36" aria-hidden="true" />
<div className="relative px-6 pt-8 sm:pt-16 md:pl-16 md:pr-0">
<div className="mx-auto max-w-2xl md:mx-0 md:max-w-none">
<div className="w-screen overflow-hidden rounded-tl-xl bg-gray-900">
<div className="flex bg-gray-800/40 ring-1 ring-white/5">
<div className="-mb-px flex text-sm font-medium leading-6 text-gray-400">
<div className="border-b border-r border-b-white/20 border-r-white/10 bg-white/5 px-4 py-2 text-white">
App.jsx
</div>
<div className="border-r border-gray-600/10 px-4 py-2">
Components.jsx
</div>
</div>
</div>
<div className="px-6 pb-14 pt-6">
{/* Code content */}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
3. Card Grid
Responsive card grid örneği:
// components/CardGrid.tsx
const features = [
{
name: 'Kolay Entegrasyon',
description: 'Hazır komponentler ile hızlı geliştirme',
icon: (
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
),
},
// ... diğer özellikler
];
export function CardGrid() {
return (
<div className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:text-center">
<h2 className="text-base font-semibold leading-7 text-indigo-600">
Daha Hızlı Geliştirin
</h2>
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Modern web geliştirme için ihtiyacınız olan her şey
</p>
<p className="mt-6 text-lg leading-8 text-gray-600">
Tailwind UI ile profesyonel web arayüzleri geliştirmek artık çok daha kolay.
</p>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
{features.map((feature) => (
<div key={feature.name} className="flex flex-col">
<dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
<div className="h-10 w-10 flex items-center justify-center rounded-lg bg-indigo-600">
<div className="h-6 w-6 text-white">{feature.icon}</div>
</div>
{feature.name}
</dt>
<dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
<p className="flex-auto">{feature.description}</p>
<p className="mt-6">
<a href="#" className="text-sm font-semibold leading-6 text-indigo-600">
Daha Fazla Bilgi <span aria-hidden="true">→</span>
</a>
</p>
</dd>
</div>
))}
</dl>
</div>
</div>
</div>
);
}
Dark Mode Desteği
Tailwind UI komponentlerini dark mode uyumlu hale getirme:
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
};
// components/ThemeToggle.tsx
import { useState, useEffect } from 'react';
import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
export function ThemeToggle() {
const [isDark, setIsDark] = useState(false);
useEffect(() => {
const isDarkMode = document.documentElement.classList.contains('dark');
setIsDark(isDarkMode);
}, []);
const toggleTheme = () => {
document.documentElement.classList.toggle('dark');
setIsDark(!isDark);
};
return (
<button
onClick={toggleTheme}
className="rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
aria-label="Toggle theme"
>
{isDark ? (
<SunIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
) : (
<MoonIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
)}
</button>
);
}
Responsive Tasarım
Tailwind UI komponentlerini farklı ekran boyutlarına uyarlama:
// components/ResponsiveGrid.tsx
export function ResponsiveGrid() {
return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{items.map((item) => (
<div
key={item.id}
className="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5"
>
<div className="flex items-center space-x-4">
<img
src={item.image}
alt={item.name}
className="h-12 w-12 rounded-full"
/>
<div>
<h3 className="text-sm font-medium text-gray-900">{item.name}</h3>
<p className="text-sm text-gray-500">{item.role}</p>
</div>
</div>
</div>
))}
</div>
);
}
Performans Optimizasyonu
1. Purge CSS
// tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
2. Dinamik Sınıf Adları
// utils/classNames.ts
export function classNames(...classes: string[]) {
return classes.filter(Boolean).join(' ');
}
// Kullanımı
<div
className={classNames(
'rounded-md',
'p-4',
isActive ? 'bg-blue-500' : 'bg-gray-100',
disabled && 'opacity-50 cursor-not-allowed'
)}
>
Content
</div>
En İyi Pratikler
Komponent Organizasyonu
- Mantıklı dosya yapısı
- Tekrar kullanılabilir komponentler
- Tutarlı isimlendirme
Erişilebilirlik
- ARIA etiketleri
- Klavye navigasyonu
- Renk kontrastı
Performans
- Lazy loading
- Code splitting
- Image optimization
Responsive Tasarım
- Mobile-first yaklaşım
- Breakpoint stratejisi
- Flexible layouts
Sonuç
Tailwind UI, modern web arayüzleri geliştirmek için güçlü bir araç seti sunar. Bu yazıda öğrendiklerimizi özetleyelim:
- Temel komponentler ve kullanımları
- Dark mode implementasyonu
- Responsive tasarım stratejileri
- Performans optimizasyonları
- En iyi pratikler
Bu teknikleri kullanarak, profesyonel ve kullanıcı dostu web arayüzleri geliştirebilirsiniz.