Nuxt 3 projesinde TailwindCSS Intellisense nasıl düzeltilir

Sorun

VS Code'da açık bir Nuxt 3 + TailwindCSS projem vardı ve Tailwind intellisense düzgün çalışmıyordu. Önce eklentiyi kaldırıp yeniden kurdum, işe yaramadı. Biraz araştırınca şu çözümü buldum; bugün onu paylaşıyorum.

Neden çalışmıyor

Nuxt projelerinde bir .nuxt dizini var. Nuxt, geliştirme sırasında Vue uygulamanı üretmek için burayı kullanıyor. Dikkatli bakarsan içinde .nuxt/tailwind.config.cjs diye bir dosya da göreceksin. Yani Tailwind aynı projede iki config dosyası buluyor: biri kök dizinde, diğeri .nuxt içinde.

Çözüm

Eklentiye .nuxt dizinini yok saymasını söyleyebilirsin. Bunun için:

• Projenin kök dizininde bir /.vscode klasörü oluştur.
• İçine bir settings.json dosyası ekle.
• Aşağıdaki kodu o dosyaya kopyala.

// /.vscode/settings.json
{
  "tailwindCSS.files.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**",
    "**/.svn/**",
    "**/.nuxt/**"
  ]
}

Bundan sonra Tailwind intellisense'in düzgün çalışması gerekiyor.