Tailwind CSS, geliştiricilerin bir CSS dosyasına geçmeden özel web bileşenleri tasarlamasına olanak tanıyan bir yardımcı program ilk CSS çerçevesidir. Bu eğitimde, Tailwind CSS'yi React'e nasıl kuracağınızı ve basit bir React sayfası oluşturmak için nasıl kullanabileceğinizi öğreneceksiniz.

Neden Tailwind CSS Kullanmalı?

zaten çok var CSS geliştiricilerin web sayfalarını tasarlama şeklini basitleştiren çerçeveler. Peki neden Tailwind CSS kullanmalısınız?

Bootstrap ve Foundation gibi CSS çerçeveleri, fikir sahibi çerçevelerdir, yani geliştiricilere varsayılan stilleri olan önceden tanımlanmış bileşenler sağlarlar. Bu hem kişiselleştirmeyi hem de yaratıcılığı sınırlar ve sonuçta oldukça genel görünen web sitelerine sahip olursunuz.

Arka rüzgar CSS'siancak, size dinamik bileşenler oluşturmak için yaratıcı kontrol sağlayan, yardımcı program öncelikli bir çerçevedir. Bootstrap'in aksine, tasarımları istediğiniz gibi kolayca özelleştirebilirsiniz.

Tailwind CSS kullanmanın bir başka avantajı, tüm öğeleri kaldırdığı için küçük bir CSS paketi boyutu elde etmenizdir. oluşturma işlemi sırasında kullanılmayan CSS (bu, içindeki tüm CSS dosyalarını içerdiğinden Bootstrap'ten farklıdır). yapı).

hakkında daha fazla bilgi edinin Tailwind CSS ve Bootstrap arasındaki farklar Konuyla ilgili makalemizden.

Tailwind CSS Kullanmanın Dezavantajları

Tailwind CSS, deneyimli geliştiriciler için bile dik bir öğrenme eğrisine sahiptir. Yardımcı program sınıflarını tam olarak nasıl kullanacağınızı öğrenmek biraz zaman alır ve belgelere sık sık başvurmanız gerekebilir. Ancak, sınıflara aşina olduktan sonra, sade CSS'ye kıyasla daha kolay ve hızlı olduğunu göreceksiniz.

Çoğu geliştirici, CSS ve HTML dosyalarının farklı dosyalarda yazıldığı şekilde endişelerin ayrılması ilkesini izlemeyi sever. Tailwind CSS ile, CSS'yi doğrudan HTML işaretlemesine yazarsınız - bazıları için bir dezavantaj.

Bu dezavantajlara rağmen, Tailwind CSS, CSS konusunda zaten rahatsanız ve tasarımları daha hızlı oluşturmak istiyorsanız ciddi olarak düşünmeniz gereken bir çerçevedir.

Başlarken: Bir React Projesi Yaratın

Bir iskele oluşturmak için terminalde aşağıdaki komutu çalıştırın. Tepki kullanarak uygulama oluştur-tepki-uygulaması.

npx oluştur-tepki-uygulama tepki-kuyruk rüzgarı

oluştur-tepki-uygulaması webpack, babel veya linter gibi oluşturma araçlarını yapılandırmadan bir React uygulaması oluşturmanın kolay bir yolunu sunar. Bu, dakikalar içinde çalışan bir React ortamına sahip olacağınız anlamına gelir.

Yukarıdaki komut, adında yeni bir klasör oluşturur. tepki-kuyruk rüzgarı. Klasöre gidin ve tercih ettiğiniz metin düzenleyiciyi kullanarak açın.

cd tepki-kuyruk rüzgarı

Ardından, Tailwind CSS'yi kurun ve React uygulamasıyla çalışacak şekilde yapılandırın.

React'te Tailwind CSS kullanın

Bu komutla Tailwind CSS'yi ve bağımlılıklarını yükleyin:

npm tailwindcss postcss autoprefixer'ı kurun

PostCSS CSS'yi çoğu tarayıcıyla uyumlu hale getirmek için JavaScript eklentilerini kullanır. Uygulamanın çalıştığı tarayıcıyı kontrol eder ve CSS'nizin sorunsuz çalışması için gereken çoklu dolguları belirler. Autoprefixer, değerleri kullanan bir PostCSS eklentisidir. caniuse.com CSS kurallarına satıcı öneklerini otomatik olarak eklemek için.

Tailwind CSS'yi Başlat

Çalıştır arka rüzgar başlangıcı Tailwind CSS varsayılan yapılandırma dosyalarını oluşturmak için komut.

npx tailwindcss başlatma

Bu oluşturur tailwind.config.js Tailwind'in tüm yapılandırma dosyalarını saklayan ve aşağıdakileri içeren kök klasörde:

modül.exports = {
 içerik: [],
 tema: {
 uzatmak: {},
 },
 eklentiler: [],
}

Şablon Yollarını Yapılandır

Hangi CSS sınıflarının kullanıldığını görmek için kontrol etmesi gereken dosyaları Tailwind CSS'ye söylemeniz gerekir. Bu, Tailwind'in kullanılmayan sınıfları tanımlamasına ve kaldırmasına izin verir ve bu nedenle oluşturulan CSS'nin boyutunu azaltır.

İçinde tailwind.config.js, içerik anahtarının altına şablon yollarını ekleyin.

modül.exports = {
 içerik: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 uzatmak: {},
 },
 eklentiler: [],
}

Tailwind CSS'yi React'e Enjekte Edin

Bir sonraki adım, aşağıdakileri kullanarak uygulamaya Tailwind CSS'yi dahil etmektir. @kuyruk rüzgarı direktifler.

içindeki her şeyi sil index.css ve temel stilleri, bileşenleri ve yardımcı programları içe aktarmak için aşağıdakileri ekleyin.

@tailwind tabanı;
@tailwind bileşenleri;
@tailwind yardımcı programları;

Son olarak, emin olun index.css ithal edilir index.js ve Tailwind CSS kullanıma hazır olacaktır.

Bir React Bileşenine Stil Vermek için Tailwind CSS Kullanma

Aşağıdaki basit web sayfasını oluşturacak ve Tailwind'in yardımcı program sınıflarını kullanarak biçimlendireceksiniz.

Bu sayfa iki ana bölüm içerir: a gezinti çubuğu, ve kahraman bölümü (bir başlığı ve bir düğmesi olan).

Tailwind CSS'nin CSS yazmayı nasıl kolaylaştırdığını göstermek için web sayfasını düz CSS ve Tailwind CSS kullanarak şekillendirmeyi deneyin.

Değiştirerek başlayın App.js içinde kaynak Gereksiz kodu kaldırmak için klasör.

'./App.css' dosyasını içe aktarın
işlev Uygulama() {
 dönüş (



 );
}
varsayılan Uygulamayı dışa aktar;

Ardından, web sayfası içeriğini şuraya ekleyin: App.js.

"./App.css" içe aktar;
işlev Uygulama() {
 dönüş (







 Tailwind CSS, React bileşenlerini şekillendirmeyi kolaylaştırır!



Başlamak






 );
}

Düz CSS kullanmak için CSS'yi şuraya ekleyin: App.css.

gezinme {
 ekran: esnek;
 justify-content: boşluk-arasında;
 dolgu: 16 piksel 36 piksel;
 renk: #000;
 kutu gölgesi: 0px 2px 5px 0px rgba (168, 168, 168, 0.75);
}
.logo {
 yazı tipi boyutu: 18 piksel;
 yazı tipi ağırlığı: kalın;
}
ul {
 liste stili: yok;
 ekran: satır içi esnek;
}
ul li {
 sol kenar boşluğu: 16 piksel;
 imleç: işaretçi;
}
.kahraman {
 ekran: esnek;
 esnek yön: sütun;
 hizalama öğeleri: merkez;
 üst kenar boşluğu: 64 piksel;
}
h1 {
 yazı tipi boyutu: 36 piksel;
 metin hizalama: merkez;
}
.btn {
 arka plan rengi: #000000;
 renk: #fff;
 dolgu: 10 piksel;
 genişlik: uygun içerik;
 üst kenar boşluğu: 36 piksel;
}

Tailwind CSS ile her sınıf için CSS kurallarını yazmanız gerekmez. Bunun yerine, yardımcı program sınıflarını kullanırsınız. Bunlar, tek bir CSS özelliği kapsamındaki sınıflardır. Örneğin, siyah arka plan ve beyaz metin rengine sahip bir düğme oluşturmak istiyorsanız, bg-siyah ve metin beyazı faydalı sınıflar.

App.js böyle görünmelidir.

işlev Uygulama() {
 dönüş (







 Tailwind CSS, React bileşenlerini şekillendirmeyi kolaylaştırır!




 Başlamak







 );
}

İthalat yapmanıza gerek yok App.css Tailwind CSS tarafından oluşturulan stiller index.css hangisini ithal ettin index.js daha erken.

Düz CSS ile karşılaştırıldığında, bu yaklaşım anlaşılması kolay daha az kodla sonuçlanır.

Tailwind CSS ile Stilde Kod

Bu makalede Tailwind CSS, güçlü yönleri, dezavantajları ve yardımcı program sınıflarını React uygulamalarında nasıl kullanabileceğinizi öğrendiniz. Tailwind CSS, sınıfların yanı sıra, duyarlı düzenler ve yeniden kullanılabilir bileşenler oluşturma yeteneği de dahil olmak üzere başka ek özellikler de sunar.

Ancak, daha önce de belirttiğimiz gibi, Tailwind, piyasadaki tek CSS çerçevesi olmaktan uzaktır. Bir sonraki projeniz için hangisini kullanacaksınız?

Tailwind CSS vs. Bootstrap: Hangisi Daha İyi Bir Çerçeve?

Bir CSS çerçevesi seçerken gereksinimlerinizi karşılayanı bulmak önemlidir.

Sonrakini Oku

Yazar hakkında