React İle Tailwind CSS Nasıl Kurulur ?
Giriş
Herkese Merhaba,
React projemizde Tailwind CSS’i kullanabilmemiz için yapılandırmak oldukça basittir ve yalnızca birkaç dakika sürer. Bu yazımda, Tailwind CSS sınıflarını React projemizde nasıl kullanabileceğimizden bahsedeceğim.
React Projesi Oluşturma
create-react-app betiğini npx komutuyla çalıştırdıktan sonra aşağıdaki ekran çıktısını göreceğiz.
Tailwind CSS Kurulumu
Npm kullanarak, Tailwind CSS ve eş bağımlılıklarını kuralım
Yapılandırma Dosyaları Oluşturma
tailwind.config.js ve postcss.config.js , ihtiyaç duyacağımız iki yapılandırma dosyasıdır.
Proje klasöründe aşağıdaki komutu çalıştırarak bu iki dosyayı oluşturuyoruz:
Şablon Dosyaları Yolunu Ayarlama
React şablon dosyalarımızın yolunu belirtmek için aşağıdaki yapılandırma öğesini tailwind.config.js dosyamıza eklememiz gerekiyor:
Tailwind Yönergelerini CSS Dosyasına Ekleme
Tailwind katmanlarının her biri için @tailwind yönergelerini ./src/index.css dosyamıza ekleyelim.
Tailwind CSS’i React Uygulamamıza Dahil Edelim
src/App.js dosyamızda, varsayılan kodu aşağıdaki uygulamayla değiştirelim:
Aşağıdaki komut ile geliştirme web sunucusunu başlatıyoruz.
Sonuç
Web sunucumuzu başlattıktan sonra tarayıcımızda aşağıdaki çıktıyı göreceğiz.
Bu makalede Tailwind CSS’i React uygulamalarında nasıl kullanabileceğinizi öğrendiniz. Tailwind CSS, sınıfların yanı sıra, yeniden kullanılabilir bileşenler oluşturma yeteneği de dahil olmak üzere başka ek özellikler de sunar.
