Başlangıç Kılavuzu: Tailwind CSS Kullanarak Yanıt Veren Kullanıcı Arayüzleri Oluşturmayı Öğrenin

Kullanmaya başlayın. Tailwind CSS Bu durumda, öncelikle bunu projenize entegre etmeniz gerekiyor. En yaygın yöntem, paket yönetim araçları aracılığıyla kurmaktır. Eğer siz… npm 或 yarnBunu geliştirme bağımlılığı olarak kolayca ekleyebilirsiniz. Kurulum tamamlandıktan sonra, temel yapılandırmalar genellikle “” adında bir araç aracılığıyla yapılır. tailwind.config.js Bu işlem, bir yapılandırma dosyası kullanılarak tamamlanır. Bu dosyada, tema renkleri, yazı tipleri, aralık oranları gibi tasarım sisteminizin çeşitli yönlerini tanımlayabilir ve böylece projenizin tarzına uygun bir özelleştirme yapabilirsiniz. Tailwind CSS Sürüm.

Proje içinde kullanabilmek için Tailwind CSSAna CSS dosyanıza bu komutları eklemeniz gerekiyor. Genellikle, bu dosya “style.css” gibi bir adla adlandırılır. input.css 或 styles.cssAracılığıyla @tailwind Komut, enjekte edebilirsin. Tailwind CSS Temel stiller, bileşen sınıfları ve araç sınıfları… Daha sonra, bu CSS dosyasını işlemek ve üretim ortamında kullanılacak nihai stil şemasını oluşturmak için bir derleme sürecine (örneğin PostCSS kullanarak) ihtiyacınız olacak.

Basit bir proje yapısı aşağıdaki gibi olabilir:

Tavsiye edilen okuma Tailwind CSS’yi Kapsamlı Bir Şekilde Öğrenin: Başlangıçtan Gerçek Uygulamalara Kadar Modern Bir CSS Çerçevesi Rehberi。

your-project/
├── src/
│   ├── styles/
│   │   └── input.css
│   └── index.html
├── tailwind.config.js
├── package.json
└── postcss.config.js

Senin… input.css Dosyada içerik genellikle şu şekildedir:

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 →

@tailwind base;
@tailwind components;
@tailwind utilities;

Bu süreç, erişiminizin sağlandığından emin olur. Tailwind CSS Sunulan tüm pratik sınıflar.

Temel Kavramlar ve Pratik Sınıflar

Tailwind CSS Bu yaklaşımın özü, “Kullanışlılık Önceliklidir” (Utility-First) ilkesidir. Bu, geleneksel CSS kuralları yazmak veya özel bileşen sınıfları oluşturmak yerine, çok sayıda küçük ve tek amaçlı sınıfı birleştirerek doğrudan stiller oluşturmanız anlamına gelir. Bu yöntem, tasarımı hızlı bir şekilde iterasyona tabi tutmanıza ve stil dosyalarınızı küçük ve yönetilebilir tutmanıza olanak tanır.

Pratik sınıfların adlandırılmasını anlamak

Pratik sınıfların adlandırılması oldukça düzenlidir ve genellikle “özellik-değer” veya “özellik-kırılma noktası-değer” modelini takip eder. Örneğin,text-blue-500 Metin renginin mavi paletteki 500. renk seviyesine ayarlandığını belirtir.p-4 Tüm yönlerde (padding) 4 birimlik bir iç boşluk (margin) uygulanacağını belirtir. md:p-6 Bu, orta (md) ekran boyutları ve üzerinde için iç boşluğun 6 birime değiştirileceğini gösterir.

Bu adlandırma yöntemi, öğrenme sürecini oldukça kolay hale getirir. Temel adlandırma kalıplarını öğrendiğinizde, çoğu sınıfın işlevini tahmin edebilirsiniz. Örneğin, eğer şunu biliyorsanız… m-2 Bu bir kenar boşluğu (margin) ise… mt-2`(margin-top)`mx-auto(Yatay yönde otomatik dış marj) Anlaması çok kolaydır.

Tavsiye edilen okuma Tailwind CSS Kılavuzu: Başlangıçtan Uzmanlığa, Modern ve responsive web siteleri oluşturmak。

Tepkisel tasarım.

Responsive tasarım, doğrudan sistemde yerleşik olarak bulunan bir özelliktir. Tailwind CSS Genlerde bulunan bilgiler… Çerçeve (framework), beş adet kesme noktası (breakpoint) sunar:sm、md、lg、xl、2xlBelirli bir durak noktasına stil uygulamak istiyorsanız, yararlı sınıfın önüne durak noktası ön eki ve bir nokta (:) eklemeniz yeterlidir. Örneğin,<div class="“text-sm" md:text-base lg:text-lg”> Küçük ekranlarda küçük font boyutunda, orta boyutlu ekranlarda standart font boyutunda ve büyük ekranlarda büyük font boyutunda bir metin oluşturulacak. Herhangi bir medya sorgusu yazmanıza gerek yok; tüm duyarlılık (responsive) işlemleri sınıf adları aracılığıyla gerçekleştiriliyor.

Tepkisel düzen oluşturma.

Kullanın. Tailwind CSS Esnek bir düzen oluşturmak hem sezgiseldir hem de verimlidir. Çerçeveler, basitten karmaşıka kadar her türlü duyarlı (responsive) arayüzü oluşturmak için güçlü araçlar sunar.

Flexbox ve Grid kullanımı

Bir boyutlu düzenlemeler için doğrudan kullanabilirsiniz. flex、flex-col、items-center、justify-between Benzer sınıflar kullanarak Flexbox düzenlemesini hızlı bir şekilde gerçekleştirebilirsiniz. Daha karmaşık iki boyutlu düzenlemeler için ise…grid、grid-cols-3、gap-4 Bu tür araçlar, CSS Grid’i kolayca kullanmanıza olanak tanır.

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.

Örneğin, mobil cihazlarda dikey olarak, masaüstünde ise yatay olarak sıralanan üç sütunlu bir düzen oluşturmak çok basittir:

<div class="“container" mx-auto p-4”>
  <div class="“flex" flex-col md:flex-row gap-4”>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Kolon Bir</div>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Kolon 2</div>
    <div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>Kolon Üç</div>
  </div>
</div>

Yukarıdaki kodda,container Sınıf, merkezli ve maksimum genişlik kısıtlamalarına sahip bir konteyner sağlar.flex-col Varsayılan (mobil cihaz) ayarlarda dikey bir sıralama oluşturulur. md:flex-row Orta boyutlu ve daha büyük ekranlarda içerikleri yatay olarak sıralayın.gap-4 Alt elemanlar arasına boşluk ekleyin.

İşlem konteynerleri ve aralıkları

Tailwind CSS Boşluk sistemi, yapılandırılabilir bir orana dayanmaktadır (varsayılan olarak 4px’nin katlarıdır; örneğin 1, 0.25rem’e karşılık gelir). Bu sayede margin, padding, gap, width, height gibi tüm özelliklerde tutarlı bir düzenin sağlanması çok kolay hale gelir. p-6、m-2、space-x-4 Böyle bir sınıf sayesinde, piksel değerleri üzerinde defalarca düşünmenize gerek kalmadan, öğeler arasındaki ve öğelerin içindeki boşluk ilişkilerini hassas bir şekilde kontrol edebilirsiniz.

Tavsiye edilen okuma Peki, Tailwind CSS’yi modern ön uç geliştirmede tercih edilen bir çerçeve yapan nedir?。

Özelleştirme ve Gelişmiş Özellikler

Her ne kadar Tailwind CSS Kutudan çıkarır çıkarmaz kullanılabilir; ancak asıl gücü yüksek özelleştirilebilirliğindedir. Varsayılan değerlerin hemen hemen her biri bir yapılandırma dosyası aracılığıyla ayarlanabilir.

Konfigürasyon tasarımı için token ayarlama

在 tailwind.config.js Dosyada, varsayılan tema ayarlarını genişletebilir veya değiştirebilirsiniz. Örneğin, markanın renklerini ekleyebilir, özel yazı tipi aileleri belirleyebilir, kesme noktası değerlerini değiştirebilir veya kendi aralık oranlarınızı oluşturabilirsiniz.

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.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1d4ed8’,
      },
      fontFamily: {
        ‘sans’: [‘Inter’, ‘system-ui’, ‘sans-serif’],
      },
    },
  },
  // ... 其他配置
}

Yapılandırmayı tamamladıktan sonra, doğrudan şunlar gibi araçları kullanabilirsiniz: text-brand-blue 或 font-sans İşte böyle bir sınıf. Bu tür bir tasarım tokenı yönetim yöntemi, tasarım kararlarını tek bir yerde toplar ve tüm projenin görsel olarak tutarlı olmasını sağlar.

Yeniden kullanılabilir bileşenler oluşturmak

Pratiklik öncelikli olsa da, yine de bunu başarabilirsiniz. @apply Komutları kullanarak tekrarlayan pratik sınıf modelleri oluşturarak özel CSS sınıfları oluşturabilirsiniz. Bu, birden fazla yerde tekrarlanan ve karmaşık stil kombinasyonlarınız olduğunda çok faydalıdır.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}

Daha sonra bunu HTML içinde kullanabilirsiniz. <button class=“btn-primary”>Lütfen dikkat edin:Tailwind CSS Resmi tavsiye, kullanımın dikkatli bir şekilde yapılması yönündedir. @applyÖncelikle, bakım kolaylığını sağlamak için pratik sınıfları doğrudan HTML içinde birleştirmeyi düşünün. Gerçekten karmaşık mantığa sahip bileşenler için ise, React, Vue gibi JavaScript çerçevelerinin bileşen mekanizmalarını kullanarak bunları paketlemelisiniz.

Performans Optimizasyonu ve Üretim Dağıtımı

Proje geliştirme işlemi tamamlandığında, üretim ortamı için stil dosyalarını optimize etmeniz gerekecektir.Tailwind CSS Birçok pratik sınıf oluşturulacak, ancak projeniz büyük ihtimalle bunların sadece bir kısmını kullanacaktır. Optimize edilmemiş dosyaları doğrudan dağıtmak, çok miktarda gereksiz kodu da beraberinde getirecektir.

PurgeCSS kullanarak “ağacı sallama” (shake the tree) işlemi yapılır.

Üretim sürümünü oluştururken,Tailwind CSS Birlikte olacak. PurgeCSS(Daha yeni sürümlerde entegre edilmiştir.) tailwindcss Kendi başına çalışır ve HTML, JavaScript bileşenlerinizi veya diğer şablon dosyalarınızı tarayarak gerçekten kullandığınız sınıf adlarını belirler; ardından kullanılmayan tüm stilleri kaldırır. Bu işlem genellikle nihai CSS dosyasının boyutunu birkaç MB’den birkaç KB’ye veya birkaç on KB’ye kadar azaltır.

Yapılandırmalar genellikle… tailwind.config.js Tamamlandı:

module.exports = {
  purge: [‘./src/**/*.{html,js,jsx,ts,tsx,vue}’],
  // ... 其他配置
}

Sınıf adınızı içeren tüm kaynak dosya yollarını belirtmeniz gerekiyor; derleme aracı bunları otomatik olarak işleyecektir.

JIT (Just-In-Time) modunu etkinleştirin.

Belli bir sürümden itibaren,Tailwind CSS Anlık (Just-In-Time, JIT) motoru tanıtıldı. JIT modunda, stiller ihtiyaç duyulduğunda oluşturulur; tüm olası sınıfları içeren devasa bir stil tablosu önceden hazırlanmaz. Bu da şu anlama gelir:
1. Geliştirme ve derleme süreçleri çok hızlıdır.
2. İstediğiniz herhangi bir değeri kullanabilirsiniz, örneğin… top-[-113px] 或 text-[#1d4ed8]Ve bunu, önceden yapılandırmada tanımlamaya gerek kalmadan yapabilirsiniz.
3. Üretim süreci de esasen ihtiyaca göre gerçekleşir; bu nedenle karmaşık süreçlere gerek yoktur. purge Yapılandırma ve performans açısından da oldukça mükemmel.

JIT (Just-In-Time) modunu etkinleştirmek için yalnızca yapılandırma dosyasında gerekli ayarları yapmanız yeterlidir. mode Ayarları yapın. ‘jit’Ve kaynak dosyanın yolunu belirtin.

Özetle.

Tailwind CSS Gerçekten de öncelikli bir metodoloji kullanarak, geliştiricilerin kullanıcı arayüzleri oluşturma şeklini tamamen değiştirdi. Stil kararlarını CSS dosyalarından HTML veya şablonlara taşıdı; bu sayede inanılmaz bir geliştirme hızı ve yüksek bir tasarım tutarlılığı sağlandı. Hızlı bir şekilde kurulum yapmaktan, temel pratik sınıf sistemini anlamaya, karmaşık yanıt veren (responsive) düzenlemeler oluşturmaktan, tasarım sistemlerini derinlemesine özelleştirmeye ve üretim performansını optimize etmeye kadar her şey mümkün oldu.Tailwind CSS Tam, verimli ve genişletilebilir bir araç seti sunulmuştur. Bunları öğrenmek, stil mimarisi ve adlandırma standartları üzerinde çok fazla zaman harcamadan, hem işlevsellik hem de estetik açıdan mükemmel arayüzler oluşturmaya daha fazla odaklanabilmeniz anlamına gelir.

Sıkça Sorulan Sorular.

Tailwind CSS tarafından oluşturulan sınıf adlarının çok olması, HTML kodunun gereğinden fazla uzun ve karmaşık hale gelmesine neden olabilir mi?

Evet, bu pratikliğin öncelikli olduğu bir çerçevenin (framework) yaygın bir özelliğidir. HTML öğeleri üzerinde… class Öznitelikler oldukça uzun olabilir. Ancak bu genellikle bir denge olarak kabul edilir. HTML dosyalarının boyutu biraz artsa da, CSS dosyaları optimizasyonlar sayesinde oldukça küçük hale gelir ve tarayıcılar HTML’yi çok hızlı bir şekilde işler. Birçok geliştirici, elde edilen geliştirme hızı, sürdürülebilirlik ve esneklik açısından bu fazlalığın tamamen kabul edilebilir olduğunu düşünür. React, Vue gibi bileşen tabanlı çerçevelerde bu fazlalıklar bileşenlerin içinde gizlenebilir ve dışarıya karşı daha sade bir görünüm sağlanır.

Üçüncü parti bileşenlerin Tailwind stilini nasıl geçersiz kılabilir veya sıfırlayabilirsiniz?

Kullanıma alındığında… Tailwind CSS Üçüncü parti bileşen kütüphanelerini kullanırken, stil çatışmaları meydana gelebilir. Bununla başa çıkmak için birkaç strateji vardır: 1. Özgüllüğü artırın: Stillerinizi sarmak için daha spesifik sınıflar veya seçiciler kullanın. 2. !importantPratik sınıfların ardından ekleyin. ! Önekler, örneğin… bg-red-500!(JIT modunda), ancak bunun dikkatli kullanılması gerekmektedir. 3. Yapılandırmada sırayı ayarlayın: CSS’nizin bileşen kütüphanesinin CSS’sinden sonra yüklenmesini sağlayın. 4. En temel yöntem ise, eğer bileşen kütüphanesi izin veriyorsa, CSS’sini kendi dosyanızda kullanmaktır. Tailwind CSS “Temel” stilin bir parçası olarak dahil edilmiştir; böylece pratik sınıflarınız aynı tasarım özelliklerine dayanabilir ve daha yüksek bir öncelik kazanabilir.

Tailwind CSS, hangi ön uç (front-end) çerçeveleriyle birlikte kullanılmaya uygundur?

Tailwind CSS Bu, herhangi bir HTML üretebilen ön uç teknoloji yığını ile mükemmel bir şekilde uyum sağlayan bir CSS çerçevesidir. Özellikle React, Vue.js, Angular, Svelte ve Next.js gibi modern JavaScript çerçeveleri ve kütüphaneleri arasında popülerdir. Bu çerçevelerin bileşen modelleri ile... Tailwind CSS Pratik sınıf kombinasyonları birbirini tamamlar; stil ve yapıyı birlikte bir bileşen içinde paketleyebilirsiniz. Ayrıca, React, Vue gibi çerçeveler için geliştirilmiş entegrasyon eklentileri ve araçlar da mevcuttur, bu da geliştirme deneyimini daha da iyileştirir.

Ekip projelerinde, Tailwind CSS sınıf adlarının kullanımında tutarlılık nasıl sağlanır?

Tutarlılığı korumak için bazı standartlara ve araçlara ihtiyaç vardır. Öncelikle, bunları iyi bir şekilde kullanmak önemlidir. tailwind.config.js Bu dosya, markanın renklerini, aralıklarını, yazı tiplerini ve diğer tasarım özelliklerini merkezi bir şekilde yönetmeyi sağlar; böylece herkes aynı tasarım sistemini kullanır. Ayrıca, Tailwind CSS IntelliSense gibi editör eklentileri kullanılabilir. Bu eklentiler otomatik tamamlama ve yazıya gelindiğinde gösterilen önizlemeler sunarak hafızayı azaltır ve yazım hatalarını önler. Karmaşık stil kombinasyonları için ise ekip, kullanılacak kuralları önceden belirleyebilir. @apply Bazı genel olarak kabul görmüş ve sık kullanılan bileşen sınıflarını (örneğin butonlar, kartlar) ayırın veya ilgili çerçeve bileşenlerini doğrudan oluşturun. Ayrıca, Prettier eklentisini kullanın. prettier-plugin-tailwindcss Otomatik olarak düzenlenebilir. class Özniteliklerdeki sınıf adlarını sıralayın ve kod stilini birleştirin.