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.

Nedir bu Tailwind CSS?

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

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.

--

--

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

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

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