Tailwind CSS, Vite ile oluşturulmuş VueJS 3'e nasıl kurulur?

Yazılım geliştirmede kararlılık (stabilite) ve hız çok önemlidir. Bundan beş yıl önce Frontend geliştirmek zaman alan bir deneyimdi. Sadece development ortamı ve hot reload imkanı oluştururken bile GulpJS gibi araçlara mahkumduk, optimizasyonu zahmetliydi ve tutarsızlıklarla karşılaşırdık. Gelişen teknolojiyle (ve framework’lerle ) artık hot reload; üzerinde hiçbir kontrolümüz olmayan, otomatikman kendini gerçekleştiren default bir özellik.

Her zaman gelişimi sempatik bulamayabiliriz, hatta genellikle her yeni ‘icada’ bir direnç gösteririz, ancak önünde sonunda bu gelişimlerden faydalanırız ve övmeye başlarız. Frontend topluluğu için Tailwind CSS övme zamanı geldi. Son zamanlarda hakkında çokça yazılar yazılıyor, övgü dolu video içerikler yayınlanıyor.

Nedir bu Tailwind CSS?

Tailwind bir CSS framework’üdür. Her frontend developer’ın kendince küçük çaplı yarattığı bir class merkezli style yönetimine benzer. Örneğin, justify-center adında bir global class tanımlarsınız. İçerisinde display: flex; justify-content: center komutları vardır. Ne zaman bir nesneye bu komutları uygulamak isterseniz justify-center class’ı atayıp geçersiniz. Tailwind CSS bu prensiple çalışır. Ama çok daha gelişmiştir.

Tailwind CSS’e hazır mıyım?

Tailwind CSS kullanan Frontend Developer’ların ortak bir önerisi var. Pure CSS’te belli bir seviyeye gelmeden Tailwind CSS gibi framework’lere bulaşmayın. Aksi takdirde Tailwind CSS’ten umduğunuz performansı alamazsınız ve Pure CSS’te ciddi bir körelme görülebilir.

Flexbox ve CSS Grid konseptlerini biliyorsanız ve Media Query kullanarak responsive tasarımlar yapabiliyorsanız Tailwind CSS’e hazırsınız diyebiliriz.

VueJS 3'e nasıl kurulur

• Vite ile VueJS projesi yaratın
• Tailwind CSS kurun

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• tailwind.config.js Dosyası içerisindeki content array’ini aşağıdaki komutla değiştirin.

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

• src içerisine index.css adlı CSS dosyası yaratın, içerisine aşağıdaki komutları yapıştırın.

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

• main.js içerisinde index.css’i import edin.

Artık projenizin herhangi bir yerinde Tailwind CSS class’larını kullanabilirsiniz.

GitHub Repo
https://github.com/gayret/tailwind-css-vuejs

Yararlandığım kaynaklar

• https://tailwindcss.com/docs/guides/vite