Vue 3 Projesine TailwindCSS Eklemek

Tugrul
1 min readAug 13, 2021

--

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 autoprefixer

Ben 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'

main.js

--

--

Tugrul
Tugrul

No responses yet