Как исправить TailwindCSS Intellisense в проекте Nuxt3

Как исправить tailwindcss intellisense в проекте nuxt3

В проекте Nuxt3 tailwindcss intellisense, похоже, не работает должным образом. В этом блоге я поделюсь обходным решением этой проблемы.

4 октября 2024 г. в 00:00:00

nuxttailwindcssru

Проблемы

У меня был проект Nuxt3 и TailwindCSS. который был открыт в VsCode. Но проблема была в том, что в моем проекте интеллектуальная система попутного ветра не работала должным образом. Я попытался переустановить расширение vscode попутный ветер, но проблема не решилась должным образом. Позже, проведя небольшое исследование, я нашел workaround, Этим я делюсь здесь сегодня.

Почему это не работает?

В нашем проекте nuxt у нас есть каталог .nuxt. Nuxt использует каталог .nuxt/ в разработке для создания вашего приложения Vue. И если мы попытаемся поискать правильно, то обнаружится также файл с именем .nuxt/tailwind.config.cjs. Итак, Tailwind найдёт файл конфигурации в том же проекте: один находится в вашем корневом каталоге, а другой - в вашем .nuxt. каталог.

Возможный обходной путь

Одним из возможных решений является то, что в вашем проекте мы вызываем команду расширения, чтобы исключить каталог .nuxt. Чтобы исключить каталог .nuxt из вашего рабочего пространства,

  • Создайте папку /.vscode на корневом уровне вашего проекта.
  • В папку .vscode добавьте файл settings.json.
  • Скопируйте приведенный ниже код в файл .vscode/settings.json.
{
  "tailwindCSS.files.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**",
    "**/.svn/**",
    "**/.nuxt/**"
  ]
}

Надеюсь, теперь Intellisense tailwindcss начнет работать правильно.