如何修复 Nuxt3 项目中的 TailwindCSS 智能提示

问题

我有一个 Nuxt3 和 TailwindCSS 项目，在 VsCode 中打开。但问题是，在我的项目中 tailwind 智能提示无法正常工作。我尝试重新安装 vscode tailwind 扩展，但问题没有得到很好的解决。后来经过一些研究，我找到了一个解决方法，今天我在这里分享给大家。

为什么不工作

在我们的 nuxt 项目中有一个

.nuxt

目录。Nuxt 在开发中使用

.nuxt/

目录来生成你的 Vue 应用程序。如果我们仔细查看，还有一个名为

.nuxt/tailwind.config.cjs

的文件，所以 tailwind 在同一个项目中找到了两个配置文件，一个在你的根目录中，另一个在你的

.nuxt

目录中。

可能的解决方法

一个可能的解决方案是，在你的项目中我们可以告诉扩展排除

.nuxt

目录。要在你的工作区中排除

.nuxt

在项目根目录创建一个
/.vscode
文件夹。
在
.vscode
文件夹内添加一个
settings.json
文件
将下面的代码复制到
settings.json
文件中

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

希望现在 tailwind 智能提示能够正常工作了。

问题

为什么不工作

可能的解决方法

Table Of Content