PhpStorm 2021.3 Help

顺风 CSS

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

在你开始前

  1. 确保您的计算机上有Node.js。

  2. 确保在Settings/Preferences |的Installed选项卡中启用了CSS捆绑插件。插件页面,如管理插件中所述。

  3. 在Settings/Preferences |上安装并启用Tailwind CSS插件 插件页面,选项卡Marketplace,如从 JetBrains 存储库安装插件中所述。

安装 Tailwind CSS

  1. 打开嵌入式终端( Alt+F12) 并键入:

    npm install tailwindcss postcss autoprefixer

  2. 要配置 Tailwind CSS 安装,请在项目的根目录中生成tailwind.config.js配置文件。在嵌入式终端( Alt+F12) 中,键入:

    npx tailwindcss init

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

完成 Tailwind 课程

@applyPhpStorm 在指令后自动完成 HTML 文件和 CSS 文件中的 Tailwind 类。

在 @apply 指令之后完成 Tailwind 类

PhpStorm 建议在 JavaScript 字符串文字中完成 Tailwind 类。

在 JavaScript 字符串文字中完成 Tailwind 类

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

伪类变体的补全建议

预览生成的 CSS

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

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

在完成代码时预览生成的 CSS

编辑您的 tailwind.config.js

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

基于tailwind.config.js中的自定义完成
最后修改:2021 年 6 月 2 日