Bildiğim kadarıyla Vuetify, Bootstrap-Vue gibi Vue’yi destekleyen css kütüphaneleri henüz Vue 3'i desteklemiyor. Bu nedenle benim gibi yeni projelerinde Vue 3 kullanmak isteyenler Bootstrap ve Tailwindcss gibi kütüphaneleri kullanmak zorunda.
Yeni bir Vue 3 projesi oluşturmak için şu yönergeleri takip edebilirsiniz. Ben pas geçiyorum.
Oluşturduğunuz projenin src klasörü altında bir css klasörü, içerisinde de tailwind.css dosyası oluşturun ve içerisine aşağıdaki kodları dahil edin.
@tailwind base;
@tailwind components;
@tailwind utilities;Ardından terminale aşağıdaki komutu girerek tailwind’i ve bağımlılıklarını yükleyin.
npm install tailwindcss postcss autoprefixerBen birkaç denememde aşağıdaki hatayı aldım ve şöyle çözdüm;
Error: PostCSS plugin tailwindcss requires PostCSS 8.Siz de aynı hatayla karşılaşırsanız şu 2 komutu kullanarak sorunu çözebilirsiniz. Sorun sanırım Vue’nin postcss’in şu anki sürümünü desteklememesiyle alakalı.
Aşağıdaki komutlarla eskisini kaldırıp uyumlu sürümü kuruyoruz.
npm uninstall tailwindcss postcss autoprefixernpm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Daha sonra proje klasörünüzde Tailwind’in ve Postcss’in configurasyon dosyalarını oluşturmamız gerek, bunun için npx tailwindcss init -p komutunu kullanıyoruz. Oluşan dosyalarda production için gerekli bazı değişiklikler yapmak mümkün ancak henüz bilmiyorum.
Son adım olarak uygulamanın main.js dosyasına tailwind’i import etmek kalıyor. import './css/tailwind.css'
