in , ,

Vite + React ve Tailwind CSS

Tailwind CSS popüler bir CSS çatısıdır ve React en popüler JavaScript kütüphanelerinden biridir.

Frontend projesi oluşturuyorsanız Tailwind CSS ve React harika bir birliktelik olacaktır.

Bu yazımızda, kodlama ortamınızı Vite ile kurmanızı, son sürümleriyle React ve Tailwind CSS’i yüklemenizi ve hemen projelerinizi oluşturmaya başlamanızı öğreneceksiniz.

Bunları yaparken şu araçları kullanacağız:

Eğer bu araçları yüklemediyseniz, yukarıdaki her biri için bağlantılara tıklayarak yükleyebilirsiniz.

VSCode için Node.js’i kurduktan sonra, terminali kullanarak projeniz için Node.js’ı kullanarak Vite’ı yükleyebilirsiniz.

Adım 1 – Projeleriniz İçin Klasör Oluşturma

Terminalinizi açın ve projenizi oluşturmak istediğiniz klasöre gidin – örneğin Masaüstü. Aşağıdaki komutu terminale girin ve enter tuşuna basın:

npm create vite@latest proje-adinizi-yazin -- --template react

Yukarıdaki komut, projenizin klasörünü oluşturacaktır. “proje-adinizi-yazin” ifadesi projenizin adıyla değiştirilmelidir. Örneğin, hesap-makinesi gibi.

Projemin adı “food-app” ve — –template react kullanarak Vite ile bir React uygulaması oluşturduğumuzu belirttik. food-app klasörü Masaüstümdeki Programlama klasöründe oluşturulacak.

— –template react kullanarak Vite ile bir React uygulaması oluşturduğumuzu belirttik.

Adım 2 – Projeleriniz İçin Klasöre Gezinme

Terminalde, oluşturduğunuz projenin klasörüne gitmek için aşağıdaki komutu girin ve enter tuşuna basın:

cd food-app

Bu komut, projenizin klasörüne gitmenizi sağlayacaktır. Şöyle bir şeyiniz olmalıdır:

“food-app” klasörüne gitmek için terminalde “cd food-app” komutunu girin.

Adım 3 – Tailwind CSS ve Diğer Bağımlılıkların Yüklenmesi

npm install -D tailwindcss postcss autoprefixer

tailwindcss, postcss ve autoprefixer bağımlılıklarını yüklemek için yukarıdaki komutu girin

Bu komut aşağıdakileri yükleyecektir:

  • Tailwind CSS çatısı
  • Vanilla CSS’de ön ekler gibi farklı işlevleri gerçekleştirmek için eklentiler sağlayan Post CSS
  • CSS kurallarına satıcı ön ekler eklemek için CSS’yi ayrıştıran ve CSS’e satıcı ön ekleri ekleyen bir PostCSS eklentisi olan Autoprefixer.

Klasörünüz kod editörünüzde şöyle görünmelidir:‌

package.json dosyanızda aşağıdaki metnin bulunduğundan emin olun:
Autoprefixer, postcss ve tail’e dikkat edin

19 – 21. satırdaki tailwindcss bağımlılıkları. Bunu okuduğunuzda sürüm numarası değişmiş olabilir.

Adım 4 – Yapılandırma Dosyalarını Oluşturun

Aşağıdaki komutu terminalinize girin ve enter’a tıklayın:

npx tailwindcss init -p

Bu komut, tailwindcss yapılandırma dosyasını oluşturur

Bu komut, tailwind.config.cjs ve postcss.config.cjs yapılandırma dosyalarını (yani yapılandırma dosyaları olarak da bilinir) oluşturur. Bu dosyalar, projenizle etkileşim kurmanıza ve her şeyi özelleştirmenize yardımcı olur.

Adım 5 – Kaynak Yollarını Yapılandırın

Tailwind sınıf isimleri içeren HTML şablonları, JavaScript bileşenleri ve diğer kaynak dosyalarını içeren tüm şablon dosyalarının yollarını tailwind.config.cjs dosyanıza ekleyin. Bu, karşılık gelen öğeler için Vanilla CSS oluşturulmasını sağlamak için gereklidir.

Şimdilik tailwind.config.cjs dosyanız şuna benziyor:

tailwind.config.cjs adlı mevcut yapılandırma dosyası, tailwind’i içerik, tema ve eklentiler gibi özelliklerle özelleştirmek için module.export nesnesini içerir.

Aşağıdaki kodları içerik bölümüne ekleyin.

"./index.html",


"./src/**/*.{js,ts,jsx,tsx}",

content özelliğine eklenen dizeler virgüllerle ayrılmış şekilde şu şekilde olmalıdır:

İçerik özelliğini güncelledikten sonra tailwind.config.cjs dosyanız buna benzer olacaktır.

Adım 6 – CSS’nize Tailwind Yönergeleri Ekleyin

Tailwind direktifleri, CSS’nin nasıl davranacağını belirten özel Tailwind ifadeleridir. Tailwind’ın üç katmanı için direktifler eklemeniz gerekecektir.

@tailwind base, Tailwind’ın temel stillerini ve eklentiler tarafından kaydedilen temel stilleri ekler. @tailwind components, Tailwind’ın bileşen sınıflarını ve eklentiler tarafından kaydedilen bileşen sınıflarını ekler. @tailwind utilities ise Tailwind’ın yardımcı sınıflarını ve eklentiler tarafından kaydedilen yardımcı sınıflarını ekler.

Aşağıdaki ifadeleri ./src/index.css dosyanıza ekleyin:

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

index.css dosyalarına eklenen üç yönerge

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

index.css dosyasına eklenen üç yönerge – @tailwind base, @tailwind components ve @tailwind utilities

Index.css dosyanız bazı varsayılan stiller içeriyor. Bunları temizleyebilir ve yukarıdaki üç yönerge satırını yapıştırabilirsiniz.

Adım 7 – Vite Sunucunuzu Başlatın

Derleme işleminizi terminaldeki npm run dev komutuyla çalıştırın. Aşağıdaki mesajı terminalinizde almalısınız‌:

Vite sunucunuzu çalıştırdıktan sonra aldığınız mesaj, yerel adresi, ağ ve yardımı içerir.

Ctrl tuşuna basılı tutun ve Local linkinde – burada http://127.0.0.1:5174 – bağlantıya tıklayın. Bunu yaparsanız, tarayıcınızda yeni bir sekme açılacaktır.

İlk çalıştırmada web sayfasının ekran görüntüsü

Yönergelerimizi girmek için index.css dosyasındaki varsayılan CSS’yi temizlediğimiz için stillerimiz bozuldu.

Adım 8 – Tailwind CSS Yazmaya Başlayın

Şimdi, içeriğinizi stilize etmek için Tailwind’in yardımcı sınıflarını kullanmaya başlayabilirsiniz. App.jsx dosyanıza gidin, aşağıdaki kodları göreceksiniz:

App.jsx dosyasının ekran görüntüsü

satırdan başlayarak dönüş öğesini temizleyin ve Tailwind’inizin çalışıp çalışmadığını test etmek için aşağıdaki metinle değiştirin. Bunu girin:

<h1 className="text-3xl font-bold underline text-center">Hello world!</h1> 

tailwind css sınıf adlarına sahip h1 öğesi

Şimdi tailwindcss’e sahipsiniz:

h1 öğesini App.jsx dosyasına ekleme

Yukarıdaki görüntüye göre, text-3xl font-bold text-red-500 underline text-center div elementine bir className olarak eklenmiştir. Bu, Tailwind CSS stilini yazmak için standarttır.

Tailwind sınıf adları hakkında buradan daha fazla bilgi edinebilirsiniz. Tarayıcınız otomatik olarak güncellenmelidir.

h1 öğesi eklendikten sonra web sayfasının ekran görüntüsü

Artık React projelerinizi oluşturmaya ve Tailwind CSS ile stillendirmeye başlayabilirsiniz.

Sonuç

Artık Vite, bir frontend yapım aracı kullanarak React ve Tailwind CSS uygulaması oluşturdunuz. Vite’ın ne olduğunu ve React şablonu ile bir Vite uygulaması nasıl oluşturulacağını, Tailwind ve diğer bağımlılıkların nasıl yüklenileceğini öğrendiniz.

Yararlı Oldu Mu?

Yorumlar

Bir yanıt yazın

Loading…

0

Outline VPN Kurulumu & Yapılandırma

MVC, MVP, MVVM, MVVM-C ve VIPER mimari kalıplarını birbirinden ayıran temel özellikler nedir?