Snazzy Web Sitelerini Hızla Geliştirmek için Tailwind CSS Nasıl Kullanılır

Bir geliştirici olarak ilerledikçe, daha az kod yazarak daha fazlasını yapmanıza yardımcı olan teknolojileri kullanma olasılığınız artar. Tailwind CSS gibi sağlam bir ön uç çerçevesi, bunu başarmanın bir yoludur.

Bu makalede, web sayfaları oluşturmaya ve tasarlamaya yardımcı olan bir CSS çerçevesi olan Tailwind CSS hakkında bilgi edineceğiz. Tailwind CSS'yi projenize nasıl kuracağınızı ve entegre edeceğinizi açıklayarak başlayacağız, bazı pratik uygulamaları ve ayrıca özel stillerinizi ve eklentilerinizi nasıl oluşturabileceğinizi göreceğiz.

Heyecanlı? Hadi başlayalım!

Tailwind CSS Nedir?

Tailwind CSS, doğrudan işaretlemenizde web sayfaları oluşturmak ve tasarlamak için kullanabileceğiniz, önceden tanımlanmış sınıflara sahip, yardımcı program öncelikli bir CSS (Basamaklı Stil Sayfaları) çerçevesidir. HTML'nize önceden tanımlanmış sınıflar şeklinde CSS yazmanıza izin verir.

Tailwind CSS'nin neyle ilgili olduğunu daha iyi anlamanıza yardımcı olmak için bir çerçevenin ne olduğunu ve “ilk fayda sağlayan CSS” ile ne demek istediğimizi tanımlayacağız.

Çerçeve Nedir?

Genel bir programlama terimi olarak çerçeve, halihazırda var olan bir aracın özelliklerinden oluşturulmuş yeniden kullanılabilir ve hazır bileşenler sağlayan bir araçtır. Çerçeve oluşturmanın genel amacı, daha az iş yaparak geliştirme hızını artırmaktır.

Artık bir çerçevenin anlamını belirlediğimize göre, Tailwind CSS'nin CSS özellikleri üzerine inşa edilmiş bir araç olduğunu anlamanıza yardımcı olacaktır. Çerçevenin tüm işlevleri, sınıflar halinde oluşturulan CSS stillerinden türetilmiştir.

Faydalı İlk CSS Çerçevesi Nedir?

Faydalı CSS dediğimizde, işaretlememizdeki (HTML) önceden tanımlanmış işlevlere sahip sınıflara atıfta bulunuruz. Bu, yalnızca kendisine önceden tanımlanmış stiller eklenmiş bir sınıf yazmanız gerektiği ve bu stillerin öğeye uygulanacağı anlamına gelir.

Vanilya CSS (herhangi bir çerçeve veya kitaplık olmadan CSS) ile çalıştığınız bir durumda, önce öğenize bir sınıf adı verirsiniz ve ardından o sınıfa farklı özellikler ve değerler eklersiniz, bu da sırayla öğenize stil uygulayacaktır. .

Size bir örnek göstereceğiz. Burada köşeleri yuvarlatılmış bir buton ve “Beni tıkla” yazan bir metin oluşturacağız. Bu düğme şöyle görünecek:

Bunu önce Vanilla CSS kullanarak, ardından Tailwind CSS'de bulunan yardımcı program sınıflarını kullanarak yapacağız.

Vanilya CSS ile

 <button class="btn">Click me</button>

Düğme etiketlerine, harici bir stil sayfası kullanılarak stillendirilecek btn sınıfı verdik. Yani:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Tailwind CSS ile

 <button class="bg-black p-2 rounded">Click me</button>

Vanilya CSS örneğiyle aynı etkiyi elde etmek için bunların hepsi gereklidir. Kullandığımız her sınıf adının önceden tanımlanmış bir stili olduğundan, stilleri yazmanız gereken harici bir stil sayfası oluşturulmadı.

Tailwind CSS Kullanmak için Ön Koşullar

Tailwind CSS'yi kullanmadan önce, çerçevenin özelliklerini zorlanmadan kullanmak için toplantı yapmayı düşünmeniz gereken bazı ön koşullar vardır. İşte bunlardan birkaçı:

• HTML, yapısı ve nasıl çalıştığı hakkında iyi bilgi
• CSS'de sağlam temel — medya sorguları, esnek kutu ve ızgara sistemi

Tailwind CSS Nerelerde Kullanılabilir?

Tailwind CSS'yi React.js, Next.js, Laravel, Vite, Gatsby vb. JavaScript çerçeveleri dahil olmak üzere ön uç web projelerinde kullanabilirsiniz.

Tailwind CSS'nin Artıları ve Eksileri

İşte Tailwind CSS kullanmanın avantajlarından bazıları:

1. Daha hızlı geliştirme süreci
2. Yardımcı programlar benzer olduğundan CSS'nizi daha fazla uygulamanıza yardımcı olur
3. Tüm yardımcı programlar ve bileşenler kolayca özelleştirilebilir
4. Üretim için genel dosya boyutu genellikle küçüktür
5. CSS'yi zaten biliyorsanız öğrenmesi kolay
6. Öğrenmek için iyi belgeler

Tailwind CSS kullanmanın dezavantajlarından bazıları şunlardır:

1. Tüm stiller HTML dosyalarında olduğundan, işaretlemeniz büyük projeler için dağınık görünebilir.
2. CSS'yi iyi anlamadıysanız öğrenmesi kolay değildir.
3. Giriş öğeleriniz de dahil olmak üzere her şeyi sıfırdan inşa etmek zorunda kalırsınız. Tailwind CSS'yi yüklediğinizde, tüm varsayılan CSS stillerini kaldırır.
4. Web sitenizin ön ucunu geliştirmek ve esas olarak arka uç mantığına odaklanmak için harcanan zamanı en aza indirmek istiyorsanız, Tailwind CSS en iyi seçenek değildir.

Tailwind CSS Ne Zaman Kullanılır?

Tailwind CSS, daha az kod yazarak geliştirme sürecini hızlandırmak için en iyi şekilde kullanılır. Dolgu, boşluk vb. gibi çeşitli tasarım gereksinimlerinde tutarlılığın korunmasına yardımcı olan bir tasarım sistemiyle birlikte gelir; bununla, tasarım sistemlerinizi oluşturma konusunda endişelenmenize gerek yok.

Sizi bileşenleri (gezinti çubukları, düğmeler, formlar vb.) her zaman aynı şekilde kullanmaya zorlamadığı için kolayca yapılandırılabilen bir çerçeve kullanmak istiyorsanız Tailwind CSS'yi de kullanabilirsiniz; bileşenlerinizin nasıl görüneceğini siz seçersiniz. Ancak CSS öğrenmediyseniz ve uygulamadıysanız Tailwind'i asla kullanmamalısınız.

Tailwind CSS ve Diğer CSS Çerçeveleri Arasındaki Benzerlikler ve Farklılıklar

İşte birkaç benzerlik:

1. İşinizi daha hızlı yapmanıza yardımcı olurlar.
2. Önceden tanımlanmış sınıflarla gelirler.
3. CSS kuralları üzerine inşa edilmişlerdir.
4. Her ikisini de öğrenmesi ve kullanması kolay bir CSS bilgisi ile.

Şimdi bazı farklılıklara bakalım:

1. Tailwind, bileşenlerinizi oluşturmanız gerektiğinden çoğu çerçeveden farklıdır. Örneğin, Bootstrap gezinme çubukları, düğmeler ve benzeri bileşenlere sahiptir, ancak Tailwind ile bunların hepsini kendiniz oluşturmanız gerekir.
2. Bootstrap gibi bazı çerçeveler kolayca özelleştirilemez, bu nedenle tasarım modellerini kullanmak zorunda kalırsınız. Tailwind'de her şeyin akışını siz kontrol edersiniz.
3. Tailwind'i kullanmak için derinlemesine CSS bilgisi gereklidir. Aynı sonucu elde etmek için Vanilla CSS yazıyormuşsunuz gibi onları birleştirmeniz gerektiğinden, sınıf adlarını yazmak yeterli değildir. Diğer çerçevelerin çoğunda bilmeniz gereken tek şey, bir sınıf adı kullandığınızda hangi bileşenin oluşturulacağıdır.

Tailwind CSS Kullanmaya Nasıl Başlanır?

Tailwind CSS'yi kurmadan ve projenize entegre etmeden önce şunlardan emin olun:

1. Terminaldeki Node paket yöneticisinden (npm) yararlanmak için bilgisayarınızda Node.js kuruludur.
2. Projeniz, oluşturulan dosyalarınız ile kurulur.

Proje yapımız şu anda böyle görünüyor:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Ardından, projeniz için bir terminal başlatın ve aşağıdaki komutları çalıştırın:

 npm install -D tailwindcss

Yukarıdaki komut, Tailwind CSS çerçevesini bir bağımlılık olarak kuracaktır. Ardından, aşağıdaki komutu çalıştırarak tailwind.config.js dosyanızı oluşturun:

 npm install -D tailwindcss

tailwind.config.js dosyası oluşturulduğunda boş olacaktır, bu nedenle bazı kod satırları eklememiz gerekiyor:

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

İçerik dizisinde sağlanan dosya yolları, oluşturma süresi boyunca Tailwind'in kullanılmayan stilleri temizlemesini/kaldırmasını sağlar.

Sonraki adım, src klasöründeki CSS dosyanıza “@tailwind” yönergelerini eklemektir - Tailwind'in önceden tanımlanmış tüm yardımcı program stillerini sizin için oluşturduğu yer burasıdır:

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

Yapılacak son şey, terminalinizde bu komutu çalıştırarak derleme işlemini başlatmaktır:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

Yukarıdaki kodda, Tailwind'e girdi dosyamızın src klasöründeki stil sayfası olduğunu ve kullandığımız stillerin ortak klasördeki çıktı dosyasında yerleşik olması gerektiğini söylüyoruz. --watch , Tailwind'in otomatik oluşturma işlemi için dosyanızdaki değişiklikleri izlemesini sağlar; atlamak, kodumuzu her oluşturmak ve istenen çıktıyı görmek istediğimizde bu betiği çalıştırmamız gerektiği anlamına gelir.

Tailwind CSS'yi kullanma

Artık projemiz için Tailwind CSS'yi kurduk ve kurduk, şimdi uygulamasını tam olarak anlamak için bazı örnekler görelim.

Flexbox Örneği

Tailwind CSS'de esnek kullanmak için, bir esnek sınıfı ve ardından esnek öğelerin yönünü eklemeniz gerekir:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

flex-row-reverse kullanmak, düğmelerin göründüğü sırayı tersine çevirir.

flex-col onları üst üste istifler. İşte bir örnek:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Önceki örnekte olduğu gibi, flex-col-reverse , sırayı tersine çevirir.

Izgara Örneği

Izgara sisteminde sütunları ve satırları belirtirken, elemanların kullanılabilir alanı nasıl kaplayacağını belirleyecek bir sayı ileterek farklı bir yaklaşım izliyoruz:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

Renkler

Tailwind, önceden tanımlanmış birçok renkle birlikte gelir. Her rengin bir dizi farklı varyasyonu vardır; en açık varyasyon 50 ve en koyu 900'dür.

İşte bunu göstermek için birden çok rengin bir resmi ve HTML onaltılı kodları

Bir düğme öğesine arka plan rengi vermek için yukarıdaki kırmızı rengi kullanarak bunu nasıl yapabileceğinize dair bir örnek vereceğiz:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Bu sözdizimi, aynı şekilde ancak sayı kullanılmadan yazılan siyah ve beyaz dışında Tailwind'deki tüm renkler için aynıdır: bg-black ve bg-white .

Metin rengi eklemek için text-{color} sınıfını kullanırsınız:

 <p class="text-yellow-600">Hello World</p>

Dolgu malzemesi

Tailwind, tasarımlarınız arasında tutarlı bir ölçek tutmanıza yardımcı olacak bir tasarım sistemine zaten sahiptir. Tüm bilmeniz gereken, her bir yardımcı programı uygulamak için sözdizimidir.

Aşağıdakiler, öğelerinize dolgu eklemek için kullanılan araçlardır:

• p , tüm öğe boyunca dolguyu belirtir.
• py , dolgu üstünü ve alt dolguyu belirtir.
• px , sol doldurma ve sağ doldurma anlamına gelir.
• pt dolgu üstünü belirtir.
• pr dolgu-sağ anlamına gelir.
• pb alt dolgu anlamına gelir.
• pl dolgu-sol anlamına gelir

Bunları öğelerinize uygulamak için, son bölümde renk çeşitlerini temsil eden sayılara biraz benzeyen, Tailwind tarafından sağlanan uygun sayıları kullanmanız gerekir. İşte demek istediğimiz:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

marj

Doldurma ve kenar boşluğu için önceden tanımlanmış yardımcı programlar çok benzerdir. p bir m ile değiştirmelisiniz:

• m
• my
• mx
• mt
• mr
• mb
• ml

Tailwind CSS Eklentisi Nasıl Oluşturulur

Tailwind CSS'nin sizin için oluşturulmuş bir sürü yardımcı programı ve tasarım sistemi olmasına rağmen, Tailwind'in ne için kullanılabileceğini genişletmek için eklemek istediğiniz belirli bir işlevselliğe sahip olabilirsiniz. Tailwind CSS, bir eklenti oluşturarak bunu yapmamızı sağlar.

Su rengini ekleyen bir eklenti ve bir elemanı 150 X ekseninde döndüren bir döndürme yardımcı programı oluşturarak ellerimizi kirletelim. Bu yardımcı programları biraz JavaScript kullanarak tailwind.config.js dosyasında yapacağız.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Şimdi, bunu parçalayalım. Yaptığımız ilk şey, Tailwind'in eklenti işlevini içe aktarmaktı:

 const plugin = require("tailwindcss/plugin");

Ardından eklenti dizisinde eklentilerimizi oluşturmaya devam ettik:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Eklentinizi oluşturduktan sonra derleme komut dosyasını yeniden çalıştırmanız gerekebilir.

Eklentiler hazır olduğuna göre artık onları test edebiliriz:

 <button class="bg-aqua rotate-150deg">Click me</button>

Her şeyi doğru yaptıysanız, X ekseninde metni 150'ye döndürülmüş su rengine sahip bir düğmeniz olmalıdır.

Özet

İş akışınızı hızlandırmak söz konusu olduğunda çerçeveler paha biçilmez bir seçenektir. Tasarımda tutarlılığı korurken, iyi görünümlü ve profesyonel web sayfaları oluşturmanıza yardımcı olurlar. Tailwind CSS, web tasarımınızı ve geliştirmenizi bir sonraki seviyeye taşımanıza yardımcı olacak birçok yardımcı programlı CSS sınıfı sağlar.

Bu makale bize Tailwind CSS'nin ne olduğunu ve onu bir çerçeve yapan şeyin ne olduğunu öğretti. Daha sonra yükleme sürecine baktık ve mevcut işlevselliği genişletmek için özel eklentilerimizi nasıl oluşturabileceğimizi gösteren birkaç örnek gördük.

Bu noktaya kadar takip ettiyseniz, artık Tailwind'in nasıl çalıştığına dair temel ama sağlam bir anlayışa sahipsiniz. Böyle bir yardımcı program öncelikli çerçeveyi kullanmakta daha iyi olmak için, henüz sağlam bir temeliniz yoksa, pratik yapmaya devam etmeli ve CSS bilginizi artırmalısınız.

Geçmişte Tailwind CSS veya başka bir CSS çerçevesi kullandınız mı? Düşüncelerinizi yorumlar bölümünde paylaşınız!