Tailwind + WebStorm：“规则中的未知 CSS”答案

【问题标题】：Tailwind + WebStorm: "unknown CSS at rule"Tailwind + WebStorm：“规则中的未知 CSS”
【发布时间】：2020-04-09 19:45:06
【问题描述】：

我正在尝试将 Tailwind 与我的 WebStorm IDE 一起使用，但是，我收到此错误：

规则中的未知 CSS

每当我使用@apply或@tailwind时

【问题讨论】：

标签： webstorm tailwind-css

【解决方案1】：

显然我不得不从我的Preferences 禁用检查Unknown CSS at-rule - This inspection detects unknown CSS at-rules. -> Editor -> Inspections 在CSS 下的Inspections -> Invalid elements 类别

【讨论】：

【解决方案2】：

目前不支持 Tailwind，请关注 WEB-42792 和链接的工单以获取更新。

在 Preferences | 中禁用 Unknown CSS at-rule 检查编辑 |检查 | CSS |无效元素是避免Unknown CSS At Rule错误的唯一方法；请注意，某些 Tailwind 规则可能会导致来自低级别检查且无法禁用的语法错误（如 Unexpected token 等）。在这种情况下，我只能建议关闭此类文件的语法突出显示以避免错误：在编辑器中打开文件，单击右下角的 Hector 图标，然后移动滑块以更改突出显示级别为无，然后重新打开项目。见https://www.jetbrains.com/help/phpstorm/disabling-and-enabling-inspections.html#change-highlighting-level-for-file。

【讨论】：

【解决方案3】：

如果您不想在配置 IDE 中禁用 at-rules 错误。您可以选择此语法。希望这会有所帮助:)

// noinspection CssInvalidAtRule
@tailwind base;
// noinspection CssInvalidAtRule
@tailwind components;
// noinspection CssInvalidAtRule
@tailwind utilities;

【讨论】：

【解决方案4】：

恕我直言，禁用检查是错误的做法，因为此检查的目的是警告规则是否正确，而这里的问题仅仅是 IDE 不知道它:)

要解决此问题，您可以添加 Tailwind 插件 (https://plugins.jetbrains.com/plugin/15321-tailwind-css)。它将使 IDE 了解新规则，并添加许多新功能，例如类自动完成 :)

【讨论】：

但是，如果禁用几个功能也可以解决问题，为什么要这样做呢？
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。