IntelliJ IDEA 中 tailwindcss 的问题代码完成

Question

我想将 nuxtjs 和 tailwindcss 一起用于我的前端项目。我已经通过这样的模块集成了 tailwindcss：

  buildModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss'
  ],

tailwindcss 现在可以工作了，但是代码补全没有。有两个 Intellij IDEA 插件确实为 tailwind 添加了代码补全——但是当我开始自定义 tailwind.config.js 文件时，它们失败了，因为它们只根据默认的 tailwind 配置建议类（它们不'识别我自己的类并且他们建议类不再可用，因为我已通过配置文件删除它们）。

我可以使用 React 的 nextjs 进行非常相似的设置 - 因为这个框架在 .next 文件夹中创建了一个输出 css 文件，IDEA 可以利用它。这启发了我，所以我尝试删除 @nuxtjs/tailwindcss 模块，并通过 nuxt 中的 postcss 构建选项手动设置 tailwindcss。 .nuxt 文件夹中没有创建文件，即使我在那里添加了 extractCSS: true 选项也没有。

我也想在 nuxtjs 中实现 nextjs 的结果。有没有人对此有一个优雅的解决方案？

PS：我想继续使用 IDEA，并且我想避免每次顺风配置更改时通过项目中某处的控制台手动创建顺风输出。

Answer 1

直到今天我还没有找到一个完美的答案。 我使用的解决方案是在隐藏（git 忽略）文件夹内生成顺风样式的解决方案。这允许 IDEA 正确地选择样式。唯一的缺点是，如果更改配置，则必须重新构建样式（除了项目一开始几乎不会发生）。

所以在 assets/css/tailwind.css 中设置顺风，我将有一个这样的脚本：

"scripts": {
  "tailwind": "npx tailwindcss build assets/css/tailwind.css -o .tailwind/tailwind.css"
},

IDEA 将能够从 .tailwind/tailwind.css 目录中获取类。

Answer 2

尝试在同一个项目中执行 npm install -D tailwindcss@latest。

此处“webstorm/IntelliJ IDEA”首先检测“tailwind css”，当“tailwind css”作为 package.json 中的依赖项时 - 插件不理解 nuxt-tailwind css:D

IntelliJ IDEA 中 tailwindcss 的问题代码完成

Problematic code completion of tailwindcss in IntelliJ IDEA

nuxt.js

tailwind-css