IntelliJ IDEA 中 tailwindcss 的有问题的代码完成答案

【问题标题】：Problematic code completion of tailwindcss in IntelliJ IDEAIntelliJ IDEA 中 tailwindcss 的有问题的代码完成
【发布时间】：2020-06-16 06:06:28
【问题描述】：

我想将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 模块，并通过postcss 中的nuxt 构建选项手动设置tailwindcss。在.nuxt 文件夹中没有创建文件，即使我在那里添加了extractCSS: true 选项。

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

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

【问题讨论】：

标签： nuxt.js tailwind-css

【解决方案1】：

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

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

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

IDEA 将能够从.tailwind/tailwind.css 目录中选择课程。

【讨论】：

简单易行的回答，为我节省了很多时间。谢谢。
@ThanosParavantis 谢谢！也许它不是最新的。至少 WebStorm 现在已经完成了相当不错的顺风代码完成。查看 IDEA 并告诉我，也许值得更新答案。

【解决方案2】：

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

对于这里的“webstorm/IntelliJ IDEA”，当“tailwind css”作为 package.json 中的依赖项时，首先检测“tailwind css” - 插件不理解 nuxt-tailwindcss：D

【讨论】：

这个对你有用还是你试过？
Webstorm 同时获得了良好的 tailwindcss 支持，因此代码完成现在可以在没有任何 hack 的情况下运行得非常好。我没有在 IDEA 中尝试过：-D