Tailwind CSS 2023''ten bu yana frontend''in de facto utility framework''üdür. CSS yazmadan sadece class ekleyerek production-hazır UI kurabilirsiniz. Bu rehber kurulumdan özel tema tasarımına kadar tüm temelleri anlatır.
Kurulum
İlgili rehberler: Yazılım geliştirme süreçleri · PostgreSQL optimizasyonu · Git ileri seviye komutlar · Redis nedir, nasıl kullanılır · Docker ile deploy
# Next.js / React / Vite projesi
npm install -D tailwindcss@latest postcss autoprefixer
npx tailwindcss init -p
# Standalone (build tool yok)
npm install -D @tailwindcss/cli
npx @tailwindcss/cli -i input.css -o output.css --watch
# CDN (prototip için)
<script src="https://cdn.tailwindcss.com"></script>/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;Utility-First Felsefesi
Tailwind''in ana fikri: hazır class''lar kullanarak inline CSS yazmak ama class isimlerini kısaltmak. padding: 1rem yerine p-4; background-color: #3b82f6 yerine bg-blue-500.
<!-- Klasik CSS
<style>
.card { padding: 1rem; background: white;
border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
</style>
<div class="card">
<h2 class="card-title">Başlık</h2>
<p>İçerik</p>
</div>
-->
<!-- Tailwind -->
<div class="p-4 bg-white rounded-lg shadow">
<h2 class="text-xl font-semibold mb-2">Başlık</h2>
<p>İçerik</p>
</div>Responsive Design
Tailwind''in breakpoint prefix''leri mobil-first çalışır: ön ek yoksa default (mobil), sonra sm: (640px+), md: (768px+), lg: (1024px+), xl: (1280px+), 2xl: (1536px+).
<!-- Mobilde dikey, tablette 2 kolon, desktop'ta 3 kolon -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="p-4 bg-gray-100">Card 1</div>
<div class="p-4 bg-gray-100">Card 2</div>
<div class="p-4 bg-gray-100">Card 3</div>
</div>
<!-- Font boyutu mobilde küçük, desktop'ta büyük -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">Büyük Başlık</h1>Dark Mode
// tailwind.config.js
module.exports = {
darkMode: 'class', // veya 'media'
content: ['./src/**/*.{html,js,jsx,tsx}']
};<html class="dark">
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded">
Otomatik dark mode
</div>
</body>// Dark mode toggle
const toggle = document.getElementById('themeToggle');
toggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('theme',
document.documentElement.classList.contains('dark') ? 'dark' : 'light');
});
// Sayfa yüklendiğinde
if (localStorage.theme === 'dark') {
document.documentElement.classList.add('dark');
}Custom Tema
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js,jsx,tsx}'],
theme: {
extend: {
colors: {
brand: {
50: '#fef3ee',
500: '#ea580c', // keydal turuncu
700: '#9a3412'
}
},
fontFamily: {
serif: ['Instrument Serif', 'Georgia', 'serif'],
sans: ['DM Sans', 'system-ui', 'sans-serif']
},
animation: {
'fade-in': 'fadeIn 0.3s ease-out'
},
keyframes: {
fadeIn: {
'0%': { opacity: 0, transform: 'translateY(10px)' },
'100%': { opacity: 1, transform: 'translateY(0)' }
}
}
}
}
};<button class="bg-brand-500 hover:bg-brand-700 text-white px-4 py-2 rounded font-sans">
Marka rengi ile buton
</button>
<div class="animate-fade-in">Giriş animasyonu</div>Component Extraction
Aynı class''ları sık tekrarlıyorsanız component''e çıkarın — CSS''de değil, HTML/JSX''te.
// React component
function Button({ children, variant = 'primary' }) {
const variants = {
primary: 'bg-blue-500 hover:bg-blue-600 text-white',
secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
danger: 'bg-red-500 hover:bg-red-600 text-white'
};
return (
<button className={`px-4 py-2 rounded font-medium ${variants[variant]}`}>
{children}
</button>
);
}
// Kullanım
<Button variant="primary">Kaydet</Button>
<Button variant="danger">Sil</Button>@apply ile CSS Soyutlaması
Bazı durumlarda class''ları CSS tarafında tutmak kullanışlı. @apply direktifi utility''leri CSS kurallarına enjekte eder — component framework''ü kullanmadığınız projelerde faydalıdır.
@layer components {
.btn {
@apply px-4 py-2 rounded font-medium transition-colors;
}
.btn-primary {
@apply btn bg-blue-500 hover:bg-blue-600 text-white;
}
}Arbitrary Values
<!-- Özel renk, boyut vs. -->
<div class="bg-[#ea580c] w-[calc(100%-2rem)] text-[15px]">
Config'te olmayan değerler
</div>
<div class="grid grid-cols-[200px_1fr_100px] gap-[14px]">
Custom grid template
</div>Production Build
Tailwind ürettiği CSS''te sadece kullanılan class''ları tutar (PurgeCSS benzeri ama built-in). 3MB Tailwind tam dosyası production''da genellikle 5-30KB''a iner.
# Build
NODE_ENV=production npx tailwindcss -i input.css -o output.css --minifyModern Yazılım Geliştirme ve DevOps Pratikleri
Profesyonel yazılım geliştirme süreci üç pillar üzerine kuruludur: kaynak kontrolü (Git + GitHub/GitLab pull request akışı, code review zorunlu), CI/CD pipeline (otomatik test + lint + build + deploy), ve gözlemlenebilirlik (Sentry/Datadog/Grafana ile log, metric, trace toplama). Test piramidi (unit > integration > e2e) ile kod kalitesini garantilemek, mikroservis mimarisinde Docker container ve Kubernetes orkestrasyonu kullanmak, REST veya GraphQL API tasarımında OpenAPI/GraphQL Schema sözleşmesi tutmak modern standardlardır. Yazılım geliştirme yaşam döngüsü boyunca (gereksinim → tasarım → implementasyon → test → deploy → bakım) Agile/Scrum sprintleri 1-2 hafta, DevOps takımları sürekli teslim (continuous delivery) prensibiyle çalışır.
React/Vue projelerinizde Tailwind CSS kurulumu ve design system kurulumu için bize yazın