IntelliJ IDEA
 
2023.2
快捷方式：Windows
获取 IntelliJ IDEA
  1. 非 JVM 技术
  2. 样式表
  3. 顺风CSS

最终的
顺风CSS

最后修改时间：2023 年 9 月 13 日

仅在 IntelliJ IDEA Ultimate 中可用：下载以尝试或比较版本

所需插件：

CSS、Tailwind CSS  - 这些插件仅在 IntelliJ IDEA Ultimate 中可用，默认情况下启用。

IntelliJ IDEA 与Tailwind CSS框架集成，包括 HTML 文件中 Tailwind 类的补全和伪类变体的补全建议，将鼠标悬停在 HTML 和 CSS 文件中的类上或自动补全时预览生成的 CSS。IntelliJ IDEA 可以识别tailwind.config.js文件并根据您对它们进行的自定义提供补全。

在你开始之前

安装 Tailwind CSS

从Tailwind CSS 官方网站了解更多信息。

完成 Tailwind 课程

IntelliJ IDEA 在指令之后自动补全 HTML 文件和 CSS 文件中的 Tailwind 类@apply。

在 @apply 指令后完成 Tailwind 类

IntelliJ IDEA 建议使用 Tailwind 类来完成 JavaScript 字符串文字。

JavaScript 字符串文字中 Tailwind 类的补全

还显示了伪类变体的完成建议。

伪类变体的完成建议

在其他环境中完成 Tailwind 课程

IntelliJ IDEA 可以为Slim 模板以及.haml、.jte和.kte文件中的 Tailwind 类提供补全。

预览生成的 CSS

当您将鼠标悬停在 HTML 或 CSS 文件中的 Tailwind 类上时，IntelliJ IDEA 会向您显示生成的 CSS 的预览。

当您完成代码时，预览也会显示在文档弹出窗口 ( ) 中。Ctrl0Q

完成代码时预览生成的 CSS

编辑 tailwind.config.js

IntelliJ IDEA 根据您通过tailwind.config.js配置文件进行的自定义提供代码补全。例如，如果您使用新颜色定义自定义主题，则新生成的具有自定义颜色名称的类将显示在完成弹出窗口中。

根据tailwind.config.js中的定制完成

配置 Tailwind 选项

您还可以自定义默认的 Tailwind配置选项。例如，您可能想要调整提供类补全的HTML 属性列表，或者使用实验性正则表达式格式来指定应触发补全的其他位置。