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

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

--

--

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Safa Gayret

Safa Gayret

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.