Bu yazıda Vite ile oluşturulmuş bir React.js projesine Tailwindcss kurulumu nasıl yapılır bunu göstereceğim. Öncelikle Vite nedir bilmiyorsanız veya React.js projesi oluşturmayı bilmiyorsanız bu yazımı okuyabilirsiniz : Vite nedir ve proje oluşturma
Vite ile React projesi oluşturma
Öncelikle bilgisayarınızda Node.js kurulu olması gerekiyor. Ardından aşağıdaki komut ile basit bi şekilde React.js projesi oluşturun.
npm create vite@latest react-tailwind-projem -- --template react
Projeyi oluşturup gerekli paketleri kuralım
Projeyi oluşturduktan sonra projenin bulunduğu konumda terminal açık olmalı. Bundan sonra aşağıdaki komutları sırayla yazıyoruz.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Ardından Tailwind.config.js dosyasını açıp aşağıdaki kodları ekliyoruz.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Bu dosyayı düzenledikten sonra aşağıdaki gibi görünmesi gerekli.
Son olarak index.css dosyanıza aşağıdaki css komutlarını eklemeniz lazım.
@tailwind base;
@tailwind components;
@tailwind utilities;Ekledikten sonra şöyle gözükmesi lazım
Eğer her şeyi doğru kurduysanız artık projenizde Tailwind.css kullanabilirsiniz!
Ayrıca Tailwind.css in kendi sitesine de bakabilirsiniz kurulumun anlatıldığı : https://tailwindcss.com/docs/guides/vite
