Anasayfa./Bilgi./Web sitesi oluşturma./İçerik detayları.

Tailwind CSS Kılavuzu: Sıfırdan Başlayarak Modern ve Profesyonel Ön Uç Stilleri Oluşturma

2 dakika okuma.
2026-03-17
2,542
Aşağıdaki bağlantılar üzerinden alışveriş yaptığınızda, sizin için ek bir maliyet olmadan komisyon kazanıyorum.

Tailwind CSS'nin temel felsefesini anlamak.

Kod yazmaya başlamadan önce, konuyu iyi anlamak çok önemlidir. Tailwind CSS Tailwind CSS’nin tasarım felsefesi son derece önemlidir. Geleneksel CSS çerçeveleri (örneğin Bootstrap) gibi, hazır ve tamamlanmış UI bileşenleri (butonlar, kartlar vb.) sunan Tailwind, “fayda öncelikli” bir çerçevedir. Bu, bir dizi ince ayarlanabilir ve tek işlevli CSS sınıfı sunduğu anlamına gelir; bu sınıfları birleştirerek herhangi bir özelleştirilmiş tasarımı doğrudan oluşturabilirsiniz. Bu, size zaten monte edilmiş bir model yerine, bir kutu Lego parçası vermek gibidir.

Bu yöntemin avantajı, son derece yüksek esneklik ve tasarım sistemine olan kontrolüdür. Geliştiriciler artık küçük stil ayarları için özel CSS kodları yazmak zorunda kalmazlar; ayrıca, çerçevenin varsayılan stillerini geçersiz kılmak için daha karmaşık seçiciler oluşturmaya da gerek kalmaz. Sadece HTML içinde farklı sınıf adlarını birleştirmeniz yeterlidir. bg-blue-500、text-white、p-4、rounded-lgBöylece, taslakla uyumlu bir arayüz hızlı bir şekilde oluşturulabilir. HTML ve CSS dosyaları arasında gidip gelme zahmetini ortadan kaldırır ve stil kararlarını doğrudan etiketlerin içine yerleştirir; bu da geliştirme verimliliğini önemli ölçüde artırır.

Ayrıca,Tailwind CSS Yapılandırma sistemi aracılığıyla, tutarlı bir tasarım sistemi oluşturmanız ve bunu sürdürmeniz teşvik edilir. Bunu yapabilirsiniz… tailwind.config.js Dosyada, projenin rengi, aralıkları, yazı tipi boyutu, kesme noktaları gibi tasarım parametreleri tanımlanmıştır; bu sayede tüm proje görsel olarak tutarlı bir görünüm sergiler.

Tavsiye edilen okuma Tailwind CSS'nin güçlü özelliklerinin kilidini açın: başlangıçtan ileri düzeye kadar pratik bir rehber.。

İlk Tailwind CSS projenizi oluşturun

Kullanmaya başlayın. Tailwind CSS Birçok farklı yöntem bulunmaktadır; en önerilen yöntem, resmi CLI aracını kullanmak veya bu aracı bir derleme aracıyla entegre etmektir. Aşağıda, sadece HTML içeren bir projede CLI aracılığıyla hızlı bir şekilde başlamanız için adımlar yer almaktadır.

WordPress.com web sitesi oluşturma yardımcısı.
WordPress.com web sitesi oluşturma yardımcısı.
99.999% kullanılabilirlik + bölgeler arası felaket kurtarma, günün 24 saati destek, blog paketini satın alarak web sitesi oluşturmak için yapay zekanın ücretsiz kullanımı.
Bir yıl boyunca ücretsiz alan adı
WordPress.com web sitesi oluşturma yardımcısına erişin →
UltaHost Web Sitesi Oluşturma Asisti.
UltaHost Web Sitesi Oluşturma Asisti.
900+ ücretsiz, özelleştirilebilir şablon, web sitesi arama görünürlüğünü optimize etmek için gereken SEO yeteneklerini elde etmek için.
İndirim 40%.
UltaHost web sitesi oluşturma yardımcısına erişin →

Öncelikle, bir proje başlatmanız ve Tailwind’i kurmanız gerekiyor. Projenizin kök dizininde, npm veya yarn kullanarak Tailwind ve bağımlılıklarını yükleyin.

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

Bu komut, varsayılan bir şey oluşturacaktır. tailwind.config.js Yapılandırma dosyası. Ardından, genellikle “style.css” adı verilen bir CSS giriş dosyası oluşturmanız gerekiyor. src/input.cssVe bunun içine Tailwind’in komutlarını ekleyin.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Sonra, package.json CSS dosyanıza bir derleme betiği (build script) ekleyin ki işlemleriniz otomatik olarak gerçekleşsin.

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  }
}

Çalıştır. npm run devTailwind CLI, komutlarınızı dinlemeye başlayacak. src/input.css Dosyalar ve projelerdeki HTML şablonlarını alın ve tüm gerekli stilleri içeren bir dosya oluşturun. dist/output.css Dosya… Son olarak, oluşturulan CSS dosyasına HTML dosyanızdan bir bağlantı ekleyin.

Tavsiye edilen okuma Tailwind CSS Kullanım Kılavuzu ve En İyi Uygulamalar: Başlangıç Seviyesinden Uzmanlığa。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">
    Merhaba, Tailwind CSS!
  </h1>
</body>
</html>

Yapılandırma dosyasının özelleştirilmesi

Varsayılan tailwind.config.js Dosya, tüm yapılandırılabilir öğeleri içermektedir. Yaygın bir ihtiyaç, içerik kaynağını yapılandırmaktır; böylece Tailwind, projenizdeki tüm şablon dosyalarını tarayabilir ve üretim sırasında “Tree Shaking” işlemi gerçekleştirerek kullanılmayan stilleri kaldırabilir.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Değişiklik yaparak. content Dizilerde, Tailwind’in hangi dosyaları tarayarak sınıf adlarını bulması gerektiğini belirtebilirsiniz. theme.extend Bir nesneye, varsayılan temayı geçersiz kılmadan güvenli bir şekilde özel tasarım jetonları ekleyebilirsiniz.

Temel kullanım sınıflarını ve duyarlı (reaktif) tasarımı öğrenin.

Tailwind CSS Bu araçların sağladığı özellikler, neredeyse tüm CSS özelliklerini kapsamaktadır. Adlandırma kuralları sezgisel ve tutarlıdır; genellikle “özellik-modifikatör-değer” formatını takip ederler.

Bluehost Web Sitesi Oluşturma Asisti.
Yapay zeka web sitesi oluşturma araçları, 7/24 çevrimiçi sohbet ve telefon desteği, bir yıllık ücretsiz alan adı, ücretsiz CDN ve ,991 uptime SLA sunuyoruz.
Web sitesi oluşturma asisti LOGO. Bluehost'a erişin.

Düzenleme ve Aralıklar: Kullanımı flex, grid, m-{size} (Marjlar), p-{size} (İç boşluk), vb. Örneğin,mt-4 Göster. margin-top: 1rem。

Renkler ve Arka Plan: Kullanımı bg-{color} Arka plan rengini ayarla.text-{color} Metin rengini ayarlayın. Renkler, sayısal bir ölçekle gösterilir, örneğin… bg-gray-100 到 bg-gray-900。

Düzenleme: Kullanım text-{size} Yazı tipi boyutunu ayarlayın.font-{weight} Yazı kalınlığını ayarlayın.text-{alignment} Hizalama şeklini ayarlayın.

Tavsiye edilen okuma Geliştirme verimliliğini artırın: Tailwind CSS’in pratik ipuçlarını ve en iyi uygulamalarını derinlemesine öğrenin。

Responsive tasarım, Tailwind’in en güçlü yönlerinden biridir. Mobil cihazlara öncelik veren bir yaklaşım benimser; varsayılan efekt sınıfları mobil cihazlar için tasarlanmıştır ve daha büyük ekranlara uyum sağlamak için “breakpoint” (kesme noktası) ön ekleri kullanılır. Bu “breakpoint” ön ekleri şunları içerir: sm:, md:, lg:, xl:, 2xl:。

<div class="text-center md:text-left lg:text-4xl">
  <!-- 在移动端居中，在中等屏幕左对齐，在大屏幕使用超大字体 -->
</div>
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 宽度响应式变化 -->
</div>

Hover ve focus durumlarını işleme

Tailwind, etkileşim durumlarına stil eklemenizi kolaylaştıran durum varyantı önekleri sunar. Yaygın durum önekleri arasında şunlar bulunur: hover:, focus:, active:, disabled:。

hosting.com
Ücretsiz SSL, Cloudflare CDN, WAF, 40+ global veri merkezi seçeneği, daha düşük gecikme süresi ve 7/24 destek ile şimdi 671 TB'ye kadar maliyeti tasarruf edebilirsiniz. Ayrıca, yapay zeka oluşturma ve SEO optimizasyonunu da destekliyor.
LOGOSU. Hosting.com'u ziyaret edin. 
<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 text-white font-bold py-2 px-4 rounded">
  点击我
</button>

Ayrıca… tailwind.config.js Çin'de plugins Dizilere resmi eklentiler ekleyin, örneğin… @tailwindcss/forms 和 @tailwindcss/typographyDaha fazla profesyonel özellik elde etmek için formlar ve düzenleme içerikleriyle ilgili araçları kullanın.

Karmaşık bileşenlerin oluşturulması ve üretim optimizasyonu

Proje ölçeği büyüdüğünde, HTML içinde uzun sınıf adları yazmak gereksiz yere uzun ve okunaksız hale gelebilir. Bu durumda, Tailwind kodun düzenli kalmasını sağlamak için birkaç yöntem sunar.

Bileşen sınıfını çıkar: Projede tekrar tekrar kullanılan stil kombinasyonları için bunu kullanabilirsiniz. @layer components CSS dosyanızda özel bileşen sınıfları oluşturmak için aşağıdaki adımları izleyin:

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
  .card {
    @apply bg-white shadow-md rounded-lg p-6;
  }
}

Böylece, HTML içinde bunu kullanabilirsiniz. class="btn-primary" 和 class="card" Tamam.@apply Bu komut, mevcut yardımcı (utility) sınıflarını özel (kullanıcı tarafından oluşturulmuş) sınıfınıza içe aktarmak için kullanılır.

JavaScript çerçevelerini kullanmak: React, Vue, Svelte gibi bileşen tabanlı çerçevelerde, stilleri bileşenlerin içinde birleştirip kapsayabilirsiniz. Bu, karmaşıklığı yönetmenin en iyi uygulamalarından biridir.

Üretim için yapılandırma optimizasyonu

Geliştirme ortamında, Tailwind tüm olası sınıf adlarını içeren çok büyük bir CSS dosyası oluşturur. Üretim ortamında en iyi performansı elde etmek için bu dosyanın optimize edilmesi gerekir. Tailwind’in JIT (Anlık Derleme) motoru (v2.1 ve sonraki sürümlerde varsayılan olarak etkinleştirilmiştir), gerçekte kullandığınız sınıf adlarına göre CSS’yi dinamik olarak oluşturur; bu da dosya boyutunu önemli ölçüde azaltır.

Nihai üretim derlemesini gerçekleştirmek için bir derleme komutu çalıştırmanız gerekiyor; bu komut, dosyaları sıkıştıracak ve kullanılmayan tüm stilleri kaldıracaktır.

{
  "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}

Çalıştır. npm run build Basit bir CSS dosyası oluşturulacak; bu dosya yalnızca projenin ihtiyaç duyduğu stilleri içerecektir. Lütfen bunu unutmayın. tailwind.config.js Çin'deki content Yapılandırma doğru şekilde yapılmıştır; böylece Tailwind, kullanılan tüm sınıf adlarını doğru bir şekilde tespit edebilir. Ayrıca, daha fazla optimizasyon için PurgeCSS (Tailwind CSS v2+’de entegre edilmiştir) veya PostCSS eklentilerini kullanmayı düşünebilirsiniz.

Özetle.

Tailwind CSS Tailwind CSS, kullanım kolaylığı ve etkinliği sayesinde ön uç geliştiricilerinin stil yazma iş akışını tamamen değiştirdi. Düşük seviyeli ve birleştirilebilir yapı blokları sunarak geliştiricilere hızlı ve doğru tasarımlar oluşturma yeteneği sağlarken, aynı zamanda kodun esnekliğini ve sürdürülebilirliğini de korur. Basit yanıt veren araçlardan karmaşık durum değişikliklerine, bileşen tabanlı çerçevelerle sorunsuz entegrasyona kadar, Tailwind modern web geliştirmenin tüm ihtiyaçlarını karşılar. Ayarlamaları, temel sınıfları ve üretim optimizasyon tekniklerini öğrenmek, hem profesyonel hem de benzersiz kullanıcı arayüzleri oluşturmanızı sağlayacaktır.

Sıkça Sorulan Sorular.

Tailwind CSS tarafından oluşturulan CSS dosyaları çok mu büyük oluyor?

Hayır, ön koşul üretim yapılandırmasının doğru şekilde yapılmış olmasıdır. Tailwind, JIT (Anlık Derleme) modunu kullanır ve yalnızca projenizde gerçekten kullandığınız HTML şablonlarındaki sınıf adlarına göre CSS üretir. Doğru yapılandırma ile… content Yapılandırma ve Çalıştırma --minify Komutlar kullanılarak oluşturulan nihai CSS dosyaları genellikle çok küçüktür; hatta birçok elle yazılmış CSS dosyasından bile daha küçüktür.

Ekip projelerinde, stil tutarlılığını nasıl sağlayabiliriz?

Tailwind CSS Konfigürasyon sisteminin kendisi, tasarım tutarlılığını korumanın önemli bir aracıdır. Ekiplerin bu konuda dikkatli olmaları gerekir. tailwind.config.js Dosyada, renkler, aralıklar, font boyutları ve kesme noktaları gibi projenin tasarım parametreleri birleşik bir şekilde tanımlanmıştır. Tüm geliştiriciler bu birleşik parametreleri kullanırlar. text-brand-blue、p-4Rastgele herhangi bir değer yazmak yerine, belirli kurallara göre sınıf adlarını oluşturmak görsel tutarlılığı doğal olarak sağlar. Ayrıca, kod incelemeleri yapmak ve `prettier-plugin-tailwindcss` gibi araçları kullanarak sınıf adlarını otomatik olarak sıralamak, kod kalitesini daha da artırabilir.

Tasarım dosyasında yer alan ve Tailwind CSS’de karşılık gelen bir sınıfı olmayan, çok özel stil özellikleri nasıl ele alınır?

Esas olarak iki yöntem vardır. Tek seferlik kullanılan stiller için, doğrudan HTML öğelerinin üzerinde içerik içi stiller (inline styles) kullanabilirsiniz.style=”…”Bu tamamen uygulanabilir. Tekrar kullanılabilecek özel stiller için en iyi uygulama şudur: tailwind.config.js 的 theme.extend Bazı kısımları genişletebilirsiniz; örneğin, özel bir renk veya aralık değeri ekleyebilirsiniz. Eğer karmaşık bir CSS özniteliği kombinasyonu söz konusuysa, bunu temel CSS dosyanızda kullanabilirsiniz. @layer utilities Yepyeni bir yardımcı (utility) sınıfı oluşturun.

Tailwind CSS, geleneksel CSS veya SCSS ile birbiriyle çakışan (mutlak olarak birlikte kullanılamayan) teknolojiler midir?

Karşılıklı dışlayıcı değiller; bir arada var olabilirler. Tailwind projelerinizde tamamen özel CSS veya SCSS kodları yazabilirsiniz. Tailwind’in komutları…@tailwind base; Bu tür özel efektler (%s, %1$s, {{var}}, :name gibi) özel stillerinizin önüne konmalıdır. Tailwind’i, atomik stilleri işlemek için bir araç olarak düşünebilirsiniz; öte yandan, çok özel ve fayda sınıflarıyla basitçe ifade edilemeyen karmaşık animasyonlar veya düzenlemeler için özel CSS kullanabilirsiniz. Bu tür bir kombinasyon, en yüksek esnekliği sağlar.

Bir sonraki adım, bundan sonra ne yapmalıyım?

Eğer hızlı bir şekilde bir web sitesi oluşturmak istiyorsanız, bir sonraki adımda farklı web sitesi oluşturma platformlarının şablon yeteneklerini, genişletilebilirliğini ve sonraki bakım maliyetlerini karşılaştırmaya devam etmenizi öneririz.

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.

Etiketler: