Sıfırdan başlayarak: Tailwind CSS kullanarak modern, duyarlı web sayfaları oluşturun.

Günümüzde yüksek verimlilikle geliştirme hedeflenen web alanında, pratikliğe öncelik veren CSS çerçeveleri giderek daha popüler bir seçenek haline gelmektedir. Bunlar arasında…Tailwind CSS Benzersiz “atomizasyon” (parçalara ayırma) felsefesiyle öne çıkan bu yaklaşım, önceden hazırlanmış bileşenler sunmamaktadır. Bunun yerine, geliştiricilerin HTML içinde herhangi bir tasarımı hızlı bir şekilde oluşturabilmesi için bir dizi ince ayarlanabilir ve serbestçe birleştirilebilen pratik sınıf (class) sağlar. Sınıf adları için uzun süre düşünme dönemine artık veda edebilirsiniz.Tailwind CSS Stillerin kombinasyonları yoluyla oluşturulmasını teşvik etmek, UI geliştirmenin esnekliğini ve tutarlılığını büyük ölçüde artırmaktadır ve bu, modern responsive web geliştirmenin önemli bir aracıdır.

Tailwind CSS’in temel avantajlarını anlamak

Geleneksel CSS çerçeveleri, örneğin Bootstrap, şunlar gibi özellikler sunar: .btn、.card Bu tür önceden hazırlanmış bileşenler, kutudan çıkar çıkmaz kullanılabilecek olsalar da, yüksek derecede özelleştirilmiş tasarımlarda genellikle çok sayıda stil değişikliğine ihtiyaç duyulur. Bu durum, kodun şişmesine ve özel durumlar için ayrı kodlar yazılmasına neden olur.Tailwind CSS Tamamen farklı bir felsefe benimsenmiştir: Tek bir görevi yerine getiren atomik sınıflar sunulmaktadır.

“Practicality First: Atomic Classes”

Tailwind CSS Sınıf adları doğrudan tek bir CSS özelliğine karşılık gelir. Örneğin,.mt-4 Karşılık gelen margin-top: 1rem;，.text-blue-500 On altılık sistemde ifade edilen mavi renk değeridir. Bu tasarım, HTML ve CSS dosyaları arasında gidip gelmenize gerek kalmadığı anlamına gelir; ayrıca neredeyse hiç özel CSS kodu yazmanıza da gerek kalmaz. Tüm stil kararları şablon seviyesinde alınır, bu da prototip tasarımını ve iterasyon hızını çok artırır.

Tavsiye edilen okuma Başlangıçtan ileri düzeye: Tailwind CSS, front-end geliştirme verimliliğini artıran kapsamlı bir rehberdir.。

Yüksek derecede özelleştirilebilirlik ve tasarım tutarlılığı

Proje kök dizini altındaki… tailwind.config.js Yapılandırma dosyası sayesinde her şeyi tamamen kontrol edebilirsiniz. Tailwind Tasarım sistemi; renk paletinizi, yazı tipi boyutlarınızı, aralık oranlarınızı, kırılma noktalarınızı vb. burada tanımlayabilirsiniz. Bu, tüm projenin katı bir tasarım standardına uymasını sağlar ve her geliştirici aynı “tasarım dili”ni kullanarak çalışabilir, böylece ekip işbirliği sırasında UI tutarlılığı çok yüksek seviyede korunur.

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.

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 →

İhtiyaca göre oluşturulan, minimalist yapıda üretim dosyaları

Birçok kişi, bu kütüphanelerle ilk kez karşılaştığında, CSS dosyalarının çok büyük boyutlara ulaşmasından endişe eder.Tailwind CSS PurgeCSS aracılığıyla (yeni sürümlerde entegre edilmiştir)… @tailwindcss/jit Bu sorunu çözmek için en yeni motorlar (örneğin, yeni geliştirilen derleme araçları veya optimizasyon algoritmaları) kullanılır. Bu motorlar, projenizin dosyalarını (HTML, JS, Vue, React bileşenleri gibi) otomatik olarak analiz eder ve yalnızca kullanılan CSS sınıflarını nihai üretim ortamı CSS dosyasına dahil eder. Böylece, genellikle sadece birkaç KB boyutunda olan, son derece sıkıştırılmış bir stil dosyası oluşturulur.

İlk Tailwind CSS projenize başlayın.

Karmaşık iskelelere gerek kalmadan, çeşitli yollarla hızlı bir şekilde entegrasyon yapabilirsiniz. Tailwind CSS。

CDN aracılığıyla hızlı bir deneyim yaşayın.

Öğrenme amaçlı veya basit prototip tasarımı için, doğrudan CDN bağlantıları aracılığıyla içerikleri kullanabilirsiniz. Bu yöntem bazı gelişmiş özellikleri (komutlar, eklentiler, üretim optimizasyonları vb.) kullanmanıza olanak tanımasa da, hızlı bir deneyim için çok uygundur.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
  <h1 class="text-3xl font-bold text-center text-blue-600 mt-8">
    Merhaba, Tailwind!
  </h1>
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-6 mt-4">
    Bu, Tailwind CSS kullanılarak hızlı bir şekilde oluşturulmuş bir karttır.
  </div>
</body>
</html>

Resmi projeleri oluşturmak için PostCSS kullanmak

Üretim projeleri için, tüm özelliklerin kullanılabilmesi amacıyla Node.js ve PostCSS kullanılmasını öneririz.

Tavsiye edilen okuma Tailwind CSS'nin temel avantajları ve tasarım felsefesi.。

Öncelikle, projeyi npm veya yarn kullanarak başlatın ve gerekli bağımlılıkları yükleyin:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Bu, bir varsayılan değer oluşturacak. tailwind.config.js Dosya. Ardından, bir CSS dosyası oluşturun (örneğin…) src/input.css) ve bunu kullanarak @tailwind Komut, çerçevenin her bir katmanını içermek için kullanılır.

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

Daha sonra, bu CSS dosyasını işlemek için derleme araçlarını (örneğin Vite, Webpack) yapılandırın veya doğrudan kullanın. tailwindcss Yapılandırma, CLI (Komut Satırı Arayüzü) aracılığıyla gerçekleştirilir:

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.

Bluehost'a erişin.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Son olarak, oluşturulan içeriği HTML kodunuzda kullanın. ./dist/output.css Dosya.

Responsive tasarım ve etkileşim durumlarını kavramak

Modern web siteleri oluştururken, duyarlı (responsive) tasarım ve kullanıcı ile etkileşimli geri bildirimler (interactive feedback) en önemli unsurlardır.Tailwind CSS Bunun için son derece zarif bir çözüm sunulmuştur.

Mobil öncelikli, duyarlı (responsive) kırılma noktaları (breakpoints)

Tailwind Mobil öncelikli bir kesme noktası sistemi kullanılır. Varsayılan pratik sınıflar (örneğin…) .text-lg、.ml-2Önek olmadan, tüm ekran boyutlarında etkilidir. Belirli önekler ekleyerek daha büyük ekran boyutları için stilleri belirleyebilirsiniz.

Tavsiye edilen okuma Tailwind CSS Kılavuzu: Sıfırdan Başlayarak Modern, Yanıt Veren Web Sayfaları Oluşturma。

Varsayılan duraklamalar şunları içerir:
sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).

Örneğin, aşağıdaki kod mobil cihazlarda yukarıdan aşağıya doğru, orta boy ekranlarda ise yan yana görüntülenen bir düzen oluşturur:

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.

Hosting.com'u ziyaret edin.

<div class="flex flex-col md:flex-row">
  <div class="p-4 bg-blue-200 md:w-1/2">Sol taraftaki içerik.</div>
  <div class="p-4 bg-green-200 md:w-1/2">Sağ taraftaki içerik.</div>
</div>

Kolaylık sağlayan durum değişiklikleri

Pratik sınıflara durum önekleri ekleyerek, bir elemanın üzerine gelindiğinde (hover), odaklandığında (focus), etkinleştirildiğinde (activated) gibi durumlardaki stillerini kolayca tanımlayabilirsiniz.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300">
  点击我
</button>

Yukarıdaki kodda,hover:bg-blue-700 Fare üzerine geldiğinde arka plan renginin koyu maviye dönüştüğünü gösterir.transition 和 duration-300 Bu durumda, renkler arasında pürüzsüz bir geçiş animasyonu eklenmiştir. Benzer şekilde, bunu başka amaçlar için de kullanabilirsiniz. focus:、active:、disabled: Diğer durumları tanımlamak için önekler kullanılır.

Karanlık mod desteği mevcuttur.

Tailwind CSS Karanlık mod desteği yerleşik olarak bulunmaktadır. Öncelikle… tailwind.config.js Etkinleştir:

module.exports = {
  darkMode: 'class', // 或 'media'
  // ... 其他配置
}

Ayarları yapın. ‘class’ Bunu yaparken, HTML kök elemanında (örneğin ) manuel olarak değişiklik yapmanız gerekir. <html>Yukarıya geçiş yapın. class="dark"Ayarlayın. ‘media’ Bu özellik, kullanıcının sistem renk ayarlarına uyum sağlayacaktır. Etkinleştirildikten sonra, bunu kullanabilirsiniz. dark: Önekler, karanlık moddaki stilleri tanımlamak için kullanılır.

<div class="bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100">
  Desene göre arka plan rengini ve metin rengini değiştir.
</div>

İleri Düzey Teknikler ve Ekosistem

Temel kullanımlara aşina olduktan sonra, aşağıdaki teknikler ve araçlar geliştirme deneyiminizi bir üst seviyeye taşıyabilir.

Bileşenleri çıkarmak ve `@apply` kullanmak

Her ne kadar Tailwind Pratik sınıfların doğrudan HTML içinde kullanılmasını teşvik ederiz; ancak projede tekrar tekrar karşılaşılan karmaşık stil kombinasyonları için bunları kullanabilirsiniz. @apply CSS komutları, “bileşen sınıflarını” çıkarmak için kullanılı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;
}

Daha sonra, bunu doğrudan HTML içinde kullanabilirsiniz. class=“btn-primary” Bu, pratik kullanım açısından gerekli esnekliği ve bileşen tabanlı bakım kolaylığını bir arada sağlar.

Zengin resmi ve topluluk eklentileri

Tailwind CSS Canlı bir ekosisteme sahiptir. Resmi kaynaklar, şu gibi özellikler sunmaktadır: @tailwindcss/typography(Güzelleştirmek için kullanılır; metinlerin daha akıcı ve estetik bir şekilde sunulmasını sağlar.)@tailwindcss/forms(Daha iyi form stilleri)@tailwindcss/aspect-ratio Bu eklentilerin yanı sıra, topluluk da simge entegrasyonu, animasyonlar, kaydırma çubuklarının güzelleştirilmesi gibi amaçlar için sayısız eklenti geliştirmiştir ve bu da çerçevenin yeteneklerini büyük ölçüde genişletmiştir.

Ana akım ön uç (front-end) çerçevelerle derinlemesine entegrasyon

Hangi framework’ü kullanırsanız kullanın (React, Vue, Svelte veya başka biri),Tailwind CSS Hepsi sorunsuz bir şekilde entegre edilebilir. Birçok framework’un çerçeve araçları (örneğin Next.js, Nuxt.js, Vite) hazır olarak kullanıma sunulur. Tailwind Şablonlar ve çerçevenin bileşen sistemleri birleştirilerek, yüksek oranda yeniden kullanılabilir, tutarlı bir stilde ve kolayca bakımı yapılabilecek bir UI bileşen kütüphanesi oluşturulabilir.

Özetle.

Tailwind CSS Sadece bir CSS çerçevesi değil; aynı zamanda ön uç geliştirme iş akışında da bir devrimdir. Pratik ve önceliklere dayalı yaklaşımı sayesinde, stil kararlarını stil şablonlarından alıp oluşturduğunuz UI şablonlarına taşır ve inanılmaz bir geliştirme verimliliği ile tasarım tutarlılığı sağlar. responsive (uyumlu) düzenlemelerden etkileşim durumlarına, karanlık moddan performans optimizasyonuna kadar her alanda zarif ve güçlü çözümler sunar. Öğrenme sürecinin başlangıcında sınıf adlarını ezberlemek gerekebilir; ancak bir kez öğrendiğinizde, kullanıcı arayüzleri oluştururken eşi benzeri görülmemiş bir özgürlük ve hız elde edersiniz. Modern, verimli ve sürdürülebilir ön uç stilleri arayan her geliştirici için mükemmeldir.Tailwind CSS Hepsi, derinlemesine öğrenilmeye ve üretim ortamlarında kullanılmaya değer mükemmel seçeneklerdir.

Sıkça Sorulan Sorular.

Tailwind CSS’teki sınıf adları uzun olabilir; bu durum HTML kodunu karışık hale getirebilir mi?

Bu, gerçekten de yeni başlayanların sıkça yaşadığı bir endişedir. HTML’de olsa da… class Öznitelikler uzun görünebilir, ancak bu sayede tüm stil mantığı tek bir yerde toplanmış olur (görünüm katmanında) ve HTML ile CSS dosyaları arasında sık sık geçiş yapma ihtiyacı ortadan kalkar. Gerçek geliştirme sürecinde, React/Vue gibi iyi bileşenleme sistemleriyle birlikte kullanıldığında, bu sınıf adları yeniden kullanılabilir bileşenlerin içinde saklanır; bu da kodun düzenini korur. Böylece sağlanan geliştirme hızı artışı ve tasarım tutarlılığı avantajları, okunabilirliğin azalan değerinden çok daha fazladır.

Tailwind CSS’nin varsayılan stillerini nasıl özelleştirebilir veya genişletebilirsiniz?

Tüm özelleştirme işlemleri tamamlandı. tailwind.config.js İşlemler dosya içinde gerçekleştirilir. Bunu yapmak için… theme.extend Nesneler aracılığıyla yeni değerler ekleyebilir veya varsayılan değerleri değiştirebilirsiniz; örneğin renkleri genişletebilir, aralık boyutlarını ayarlayabilirsiniz. Aynı zamanda, yeni ve kullanışlı sınıflar oluşturmak için eklentiler yazabilirsiniz. Tek seferlik stiller için ise geleneksel CSS dosyaları doğrudan yazabilir veya başka yöntemler kullanabilirsiniz. @apply Kullanışlı sınıfları birleştirmek için gerekli komutlar.

Tailwind CSS, CSS-in-JS veya stil bileşenleri çözümleriyle nasıl karşılaştırılır?

Tailwind CSS Hem CSS-in-JS (örneğin Styled-components) hem de CSS’in sürdürülebilirliği ile ilgili sorunları çözmeyi amaçlamaktadır, ancak yaklaşımları farklıdır.Tailwind Bu, pratikliğin öncelikli olduğu bir CSS çerçevesidir; CSS-in-JS ise stillerin JavaScript kullanılarak yazılması ve bunların bileşenler üzerinde yerel olarak uygulanmasıdır. Her ikisi de bir arada kullanılabilir, ancak genellikle aralarından sadece biri seçilir. Tailwind Genellikle daha iyi çalışma zamanı performansı elde edilir (çünkü sonuçta sadece saf CSS kullanılır), daha küçük paket boyutları sağlanır (Purge aracılığıyla) ve tasarım öğelerine daha sıkı kısıtlamalar getirilir.

Üretim ortamında, Tailwind tarafından oluşturulan CSS dosyalarının boyutu gerçekten küçük mü?

Evet, bu tam olarak öyle. Tailwind CSS En önemli avantajlarından biri, Purge özelliğidir (en yeni sürümlerde motorun içine entegre edilmiştir). Bu özellik, derleme sürecinde kaynak kodunuzu statik olarak analiz eder, kullanılan tüm sınıf adlarını belirler ve yalnızca bu stilleri nihai olarak oluşturulan CSS dosyasına dahil eder. Tipik bir proje için, nihai CSS dosyasının boyutu genellikle 10 KB’nin altındadır; bu da, birçok geleneksel çerçevenin sık sık yüzlerce KB boyutunda sıkıştırılmamış CSS dosyalarına sahip olmasına kıyasla büyük bir avantajdır.

Bootstrap’tan Tailwind CSS’e geçmeli miyim?

Bu, projenizin ihtiyaçlarına ve ekibinizin tercihlerine bağlıdır. Eğer projeniz Bootstrap’ın temalarına ve önceden hazırlanmış bileşenlerine büyük ölçüde bağımlıysa ve çok az özelleştirme yapıyorsanız, geçişin pek bir faydası olmayabilir. Ancak, Bootstrap bileşenlerini yoğun bir şekilde özelleştirdiyseniz, sık sık stil değişiklikleri yapıyorsanız veya ekibiniz daha yüksek tasarım özgürlüğü ve geliştirme verimliliği arıyorsa, o zaman geçiş yapmak faydalı olabilir. Tailwind CSS Çok faydalı olacaktır. Bir yeni proje veya bağımsız bir modülle başlamayı ve iş akışının ekibinize uygun olup olmadığını değerlendirmenizi öneririm.