Tailwind CSS 2023 7 – React Projesi İçin Tailwind CSS Kurulumu ve İlk Ayarlar

Merhabalar.

Bu yazımda bir React projenize Tailwind CSS’i kullanmak için nasıl kurarsınız ve ayarlarını yaparsınız bunlara bakacağız.

Öncelikle react-tailwind isminde bir klasör oluşturup bu klasör içinde bir React projesi oluşturalım.

React projesi nasıl oluşturulur diye soruyorsanız, aşağıdaki yazıma göz atabilirsiniz.

React Tutorial 2023 11 – React Projesi Oluşturma

Projeyi oluşturduysanız devam ediyoruz.

Tailwind Kurulumu

Tailwind CSS kurulumu için aşağıdaki komutu terminalde çalıştıralım.

npm install -D tailwindcss

Tailwind Config Dosyasını Oluştur

Şimdi aşağıdaki komutla konfigürasyon dosyalarını oluşturalım.

npx tailwindcss init

tailwind.config.js İçinde Content Bölümünü Güncelle

Bu gördüğünüz config dosyasını açıp content kısmını aşağıdaki gibi güncelliyoruz.

 content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Bu kod parçasının anlamı nedir ne iş yapar?

Bu ifade, Tailwind CSS konfigürasyon dosyasındaki content özelliğini belirler. Bu özellik, Tailwind’in hangi dosyaları tarayarak sınıfları oluşturacağını ve bu dosyaların hangi türleri içereceğini belirler.

Özellikle, content özelliği, belirtilen glob deseni ("./src/**/*.{js,jsx,ts,tsx}") kullanarak belirli dosya türlerini içeren dosyaları seçer. Açıklamak gerekirse:

./src/ klasörü altındaki dosyaları içerir.
**/* tüm alt klasörleri ve dosyaları içerir.
{js,jsx,ts,tsx} sadece JavaScript (js), JavaScript React (jsx), TypeScript (ts), ve TypeScript React (tsx) dosyalarını içerir.

Yani, bu örnekte ./src/ klasörü altındaki tüm JavaScript ve TypeScript dosyaları, Tailwind’in tarayacağı ve stil sınıflarını oluşturacağı dosyalar olarak belirlenmiş. Bu sayede, sadece projede kullanılan dosya türlerini içeren ve optimize edilmiş bir CSS çıktısı elde edebilirsin.

src İçindeki index.css’i Güncelle

Burada amacımız aslında şu; bütün proje index.js den render edildiği için index.css’ide index.js’de tanımladığımız için buraya ekliyoruz. Böylece oluşturduğumuz tüm component’lerde kullanılabilir kılıyoruz.

index.css içine aşağıdaki kodları ekleyelim. Eğer mevcut kodlarınız varsa, ister en üste, isterseniz en alta ekleyebilirsiniz.

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

Bu ifadeler, Tailwind CSS’in temel, bileşen ve yardımcı sınıflarını projene eklemenin bir yolu olan @tailwind yönergelerini temsil eder.

@tailwind base;: Bu ifade, Tailwind’in temel (base) stil kurallarını projeye ekler. Temel kurallar, genel HTML elementleri için varsayılan stilleri içerir. Örneğin, h1 etiketi için varsayılan boyut ve renk gibi temel stil kuralları bu bölümde bulunur.
@tailwind components;: Bu ifade, Tailwind’in bileşen (component) sınıflarını projeye ekler. Bileşen sınıfları, genellikle yeniden kullanılabilir arayüz öğelerini stillemek için kullanılır. Örneğin, düğmeler, kartlar veya modaller gibi bileşenleri stillemek için kullanılan sınıflar bu bölümde yer alır.
@tailwind utilities;: Bu ifade, Tailwind’in yardımcı (utility) sınıflarını projeye ekler. Yardımcı sınıflar, genellikle hızlı ve pratik stil eklemek için kullanılır. Margin, padding, renk, boyut gibi stil özelliklerini hızlıca eklemek için kullanılan sınıflar bu bölümde bulunur.

Bu ifadeleri kullanarak, ihtiyacınıza göre sadece temel, bileşen veya yardımcı sınıfları projenize ekleyebilirsiniz. Bu modüler yaklaşım, projenin ihtiyaçlarına uygun bir şekilde sınıfları içermeyi sağlar ve gereksiz stilleri önler, böylece daha küçük ve optimize edilmiş bir CSS dosyası elde edebilirsiniz.

Çalıştıralım

Aşağıdaki komutla çalıştıralım.

npm run start

Hello World Yazalım

Artık kodlamak ve yeni sayfalar oluşturmak için her şey hazır.

Bir Hello World diyelim ve bunu tailwind CSS ile stillendirelim.

App.js dosyamızı aşağıdaki kodlarla güncelleyelim.


import './App.css';

function App() {
  return (
    <h1 className="text-6xl font-bold text-center">
      Hello world!
    </h1>
  )
}

export default App;