什么是 Tailwind CSS
Tailwind CSS, işlevselliği öncelikli tutan, pratik bir CSS çerçevesidir. Bootstrap veya Bulma gibi önceden hazırlanmış bileşen stilleri sunan çerçevelerden farklı olarak, Tailwind düşük seviyeli ve atomize (bölünebilir) CSS sınıfları sunar; geliştiriciler bu sınıfları birleştirerek herhangi bir tasarımı doğrudan oluşturabilirler. Temel felsefesi, özel stilleri ayrı bir CSS dosyasında yazmak yerine, doğrudan HTML içinde sınıf adları yazarak stilleri uygulamaktır. Bu sayede, bağlam değişiklikleri ve isimlendirme sorunlarından kaçınılmış olur.
Bir yapılandırma dosyası aracılığıyla çalışır. tailwind.config.js Yüksek derecede özelleştirilebilirlik sunulmaktadır. Bu dosyada projenizin tasarım sistemini tanımlayabilirsiniz; bunlar arasında renk paletleri, yazı tipleri, aralık oranları, kırılma noktaları vb. bulunmaktadır. Çerçeve kendisi oldukça hafiftir ve v3.0 sürümünden itibaren “İçerik Taraması” (Content Scanning) olarak adlandırılan PurgeCSS özelliği sayesinde, üretim sırasında kullanılmayan tüm CSS sınıfları otomatik olarak kaldırılır ve sonuç olarak oluşturulan dosyanın boyutu oldukça küçük olur.
Temel Kavramlar ve Temel Dilbilgisi
Tailwind CSS’yi verimli bir şekilde kullanmak için, öncelikle temel çalışma prensiplerini ve dil kurallarını anlamanız gerekir. Sınıf adlandırma sistemi sezgiseldir ve “özellik-değer” adlandırma modeline uyar.
Tavsiye edilen okuma Tailwind CSS: Başlangıçtan Uzmanlığa: Modern, Yanıt Veren Web Sayfaları Oluşturmanın Kapsamlı Rehberi。
Pratik Sınıfların Adlandırma Kuralları
Tailwind’de sınıf adları genellikle doğrudan bir CSS özelliğine karşılık gelir. Örneğin,.text-center Karşılık gelen text-align: center;，.font-bold Karşılık gelen font-weight: 700;Değerlerinde değişiklik olan öznitelikler için (örneğin kenar boşluğu (margin), iç boşluk (padding), genişlik (width) vb.), sınıf adında bir rakam bulunur. Bu rakam, yapılandırma dosyasında tanımladığınız tasarım oranlarıyla ilişkilidir. Örneğin,.mt-4 Üst kenar boşluğunun 1rem olduğunu belirtir (eğer varsayılan oranlarda 1 birim 0.25rem’e eşitse, o zaman 4 birim 1rem olur)..w-1/2 Genişliğin 50% olduğunu belirtir.
Responsive tasarım, Tailwind’in en güçlü yönlerinden biridir. Sınıf adlarının önüne belirli önekler ekleyerek, kolayca responsive (uyumlu) bir düzen oluşturulabilir. Örneğin,md:text-center Orta boyutlu ve daha büyük ekranlarda metnin merkezde görüntülenmesini sağlar. Varsayılan kesme noktaları sistemi (sm, md, lg, xl, 2xl) de yapılandırma dosyasında değiştirilebilir.
Durum varyantları (State Variants) ve sahte sınıflar (Pseudo Classes)
Tailwind, `hover`, `focus`, `active` gibi çeşitli durum değişikliklerini önekler kullanarak destekler. Bu sayede, etkileşimli öğelere stil eklemek son derece kolay hale gelir. Örneğin,hover:bg-blue-600 Mouse’un üzerine geldiğinde arka plan renginin maviye (0) dönüşmesini ifade eder. Ayrıca, değişkenleri birleştirerek de kullanabilirsiniz, örneğin… focus:hover:border-2。
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">
点击我
</button>Yukarıdaki kod, temel bir mavi arka plana, beyaz yazıya, iç boşluğa ve yuvarlak köşelere sahip bir buton tanımlar. Fare imleci butonun üzerine geldiğinde arka plan rengi koyulaşır; buton odaklandığında ise mavi bir halka şeklinde bir çerçeve belirir.
Proje Yapılandırması ve Özelleştirmeleri
Tailwind CSS’in en güçlü yanı, son derece yüksek özelleştirilebilir olmasıdır. Yapılandırma dosyaları aracılığıyla, framework’ün varsayılan stillerine uyum sağlamak yerine, framework’ü tamamen projenizin tasarım standartlarına uyumlu hale getirebilirsiniz.
Tavsiye edilen okuma Tailwind CSS’in Derinlemesine Analizi: Modern Web Geliştirmenin Temel Aracı ve Uygulama Kılavuzu。
Ayrıntılı Çekirdek Yapılandırma Dosyası Açıklaması
Projenin temel yapılandırma dosyasıdır. tailwind.config.jsBu dosya aracılığıyla, çerçevenin varsayılan temasını değiştirebilir veya genişletebilirsiniz. Örneğin, kendi renklerinizi, yazı tipi ailelerinizi, aralık oranlarınızı, kenarlık köşe yuvarlaklıklarınızı vb. tanımlayabilirsiniz.
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
theme: {
extend: {
colors: {
'brand-primary': '#1d4ed8',
'brand-secondary': '#7c3aed',
},
fontFamily: {
'sans': ['Inter var', 'system-ui', 'sans-serif'],
},
spacing: {
'128': '32rem',
}
},
},
plugins: [],
}Yukarıdaki yapılandırmada, temayı genişlettik, iki farklı marka rengi ekledik, yeni bir yazı tipi ailesi tanımladık ve özel bir aralık değeri belirledik. 128Daha sonra sınıf adlarında bunu kullanabilirsiniz. .text-brand-primary 或 .h-128 Tamam.
Eklentiler kullanarak işlevselliği genişletin.
Tailwind’in ekosistemi, ekstra kullanışlı sınıflar, bileşenler veya varyasyonlar eklemek için zengin resmi ve topluluk eklentileri sunar. Örneğin, resmi eklentiler… @tailwindcss/forms Form elemanları için daha iyi varsayılan stiller sağlandı.@tailwindcss/typography Bir tane sağlandı. .prose Bu sınıf, kontrol edilemeyen HTML içeriklerini (örneğin, bir CMS’den alınan zengin metinleri) hızlı bir şekilde güzelleştirmek için kullanılır.
Eklentilerin kurulması ve kullanılması çok basittir. Öncelikle npm aracılığıyla kurulurlar, ardından yapılandırma dosyasında gerekli ayarlamalar yapılır. plugins Diziden içe aktarabilirsiniz.
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}Pratik Uygulama: Bir Reaktif Menü Çubuğu Oluşturma
Yukarıdaki bilgileri, yaygın olarak kullanılan bir yanıt veren (responsive) navigasyon çubuğu oluşturarak pekiştirelim. Bu navigasyon çubuğu, büyük ekranlarda yatay olarak görüntülenirken, küçük ekranlarda bir hamburger menüsü olarak katlanır.
HTML Yapısı ve Temel Stiller
Öncelikle, navigasyon çubuğunun temel HTML yapısını oluşturuyoruz ve bazı temel stil sınıflarını uyguluyoruz.
Tavsiye edilen okuma Tailwind CSS’e Giriş ve Uygulamaları: Sıfırdan Modern, Yanıt Veren Web Arayüzleri Oluşturma。
<nav class="bg-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<!-- 品牌 Logo -->
<div class="flex space-x-7">
<a href="#" class="flex items-center py-4">
<span class="font-semibold text-gray-500 text-lg">Markam</span>
</a>
</div>
<!-- 桌面端导航链接 -->
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Anasayfa.</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Hakkında</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Hizmet</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">İletişim kurun</a>
</div>
<!-- 移动端汉堡菜单按钮 -->
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<svg class="w-6 h-6 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- 移动端菜单 -->
<div class="hidden mobile-menu">
<ul>
<li><a href="#" class="block text-sm px-2 py-4 text-white bg-green-500 font-semibold">Anasayfa.</a></li>
<li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Hakkında</a></li>
<li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Hizmet</a></li>
<li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">İletişim kurun</a></li>
</ul>
</div>
</nav>Etkileşimli özellikler ekleyin.
Yukarıdaki HTML kodunda, mobil cihazlardaki menü varsayılan olarak gizlidir.class=”hidden mobile-menu”Hamburger butonuna tıklandığında menünün gösterilip gizlenmesini sağlamak için biraz JavaScript’e ihtiyacımız var. Bu genellikle Tailwind’in sınıflarıyla birlikte kullanılır.
// 简单的 JavaScript 交互
const btn = document.querySelector('.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});Birleştirilerek kullanılarak flex, hidden, md:flex Yanıt veren araç sınıfları ve bazı aralık, renk, fare üzerine gelme (hover) efektleri sınıfları sayesinde, tek bir satır özelleştirilmiş CSS kodu yazmadan hem estetik hem de işlevsel olarak tam donanımlı bir yanıt veren navigasyon çubuğu hızlı bir şekilde oluşturduk.
Özetle.
Tailwind CSS, işlevsel önceliklere ve atomize sınıflara dayalı tasarım felsefesiyle, ön uç geliştiricilerin stil yazma şeklini tamamen değiştirdi. HTML ve CSS dosyaları arasında gidip gelme zorunluluğunu ortadan kaldırdı ve son derece yapılandırılabilir bir tasarım sistemi ile güçlü yanıt veren, duruma göre değişen özellikler sayesinde tutarlı, estetik ve yüksek performanslı kullanıcı arayüzleri oluşturmayı benzeri görülmemiş bir verimlilikle mümkün kıldı. Temel dil yapısını anlamaktan, projelerin yapılandırmasını derinlemesine özelleştirmeye, ve tam bileşenler oluşturmayı uygulamaya kadar, Tailwind CSS’yi öğrenmek modern web geliştirme iş akışınıza büyük bir verimlilik katacaktır.
Sıkça Sorulan Sorular.
Tailwind CSS tarafından oluşturulan CSS dosyalarının boyutu çok büyük olabilir mi?
Hayır, işte bu da Tailwind’in tasarımındaki inceliklerden biridir. Geliştirme modunda, tüm olası araç sınıfları dahil olduğu için CSS dosyalarının boyutu gerçekten büyüktür. Ancak üretim derleme (production build) sırasında Tailwind, çok verimli bir içerik tarama mekanizması (orijinal adıyla PurgeCSS) kullanır; projenizin dosyalarını (HTML, JSX, Vue vb.) analiz eder ve yalnızca gerçekten kullanılan CSS sınıflarını saklar, ardından bunları çok küçük bir CSS dosyasına paketler. Sonuç olarak oluşan dosya genellikle sadece birkaç KB ila on birkaç KB arasındadır ve birçok elle yazılmış CSS dosyasından veya geleneksel çerçevelerin CSS dosyalarından daha küçüktür.
Takım projelerinde, stil yazımının tutarlılığını nasıl sağlayabiliriz?
Tailwind CSS, tutarlılığı sağlamak için mükemmel bir araçtır. Öncelikle, tüm geliştiriciler aynı seti kullanırlar… tailwind.config.js Tanımlanmış tasarım sistemi (renkler, aralıklar, yazı tipleri vb.) sayesinde, renk veya aralık değerlerinin keyfi olarak belirlenmesi engellenmiştir. İkincisi, stiller doğrudan HTML içinde yazıldığı ve sınıf adları standartlaştırıldığı için kod incelemesi çok daha kolay hale gelir; standartlara uymayan sınıf adı kombinasyonları kolayca tespit edilebilir. Birçok ekip ayrıca Prettier eklentisini de kullanmaktadır. prettier-plugin-tailwindcssSınıf adlarını otomatik olarak sıralayabilir ve böylece kod stilini daha da birleştirebilir.
Karmaşık veya tekrarlayan sınıf adı kombinasyonlarıyla nasıl başa çıkılır?
Birden çok öğede tekrar eden karmaşık sınıf adı kombinasyonları için, Tailwind aşağıdaki yöntemleri kullanmanızı önerir: 1. Bileşenleri ayıklayın: React, Vue, Svelte vb. bileşen çerçevelerini kullanıyorsanız, bu stillerle donatılmış öğeleri yeniden kullanılabilir bir bileşene paketlemek en doğal yöntemdir. 2. @apply direktifini kullanın: Özel CSS dosyalarında, direktifini kullanarak stilleri uygulayabilirsiniz. @apply Bu komut, bir dizi Tailwind sınıfını yeni bir CSS sınıfına aktarır. Bu yöntem, bileşenlerle soyutlanamayan küçük ve tekrarlayan stil parçaları için uygundur. Geleneksel CSS yazımına geri dönülmemek adına dikkatli bir şekilde kullanılmalıdır.
/* 在自定义 CSS 文件中 */
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}Tailwind CSS, mevcut CSS çerçeveleriyle (örneğin Bootstrap) bir arada kullanılabilir mi?
Mümkün, ancak tavsiye edilmez. Teknik olarak, bir projede hem Tailwind CSS hem de Bootstrap stil şemalarını aynı anda kullanabilirsiniz. Ancak her iki framework de benzer amaçlar için temel stiller ve araç sınıfları belirlediğinden, aralarında çatışmalar olması muhtemeldir. Bu da öngörülemeyen stil örtüşmelerine ve hata ayıklama/maintenance süreçlerinin zorlaşmasına neden olur. En iyi uygulama, projenin tamamı boyunca tek bir framework kullanmaktır. Eğer eski bir projeyi taşıyorsanız, eski framework’ün stillerini modül veya bileşen bazında Tailwind ile yavaş yavaş değiştiren kademeli bir geçiş planı oluşturmanız önerilir.
Bir sonraki adım, bundan sonra ne yapmalıyım?
Daha fazla okuma ve pratik bilgiler.
Aşağıdaki içerikler bu makalenin konusuyla ilgilidir ve daha fazla okumak için uygundur. Öncelikle mevcut sorununuza en yakın makaleden başlayın, sonra çevresel konulara doğru ilerleyin, genellikle daha iyi sonuçlar alırsınız.
- Güzel ve aynı zamanda işlevsel bir WordPress web sitesi oluşturmak için bir tema gereklidir.
- Tailwind CSS’nin Temellerini Öğrenin: Pratik Sınıflardan Reaktif Tasarıma Kadar Modern Ön Uç Geliştirme Kılavuzu
- Tailwind CSS Kullanım Rehberi: Sıfırdan Başlayarak Modern, Yanıt Veren Web Siteleri Oluşturma
- WordPress Temanızı Nasıl Seçer ve Özelleştirirsiniz: Başlangıçtan Uzmanlığa Kadar Kapsamlı Rehber
- Tailwind CSS Çerçevesini Derinlemesine Anlama: Pratik Araçlardan Modern Ön Uç Geliştirme Uygulamalarına
Türkçe