顺风 CSS
PhpStorm 与Tailwind CSS框架集成,包括 HTML 文件中 Tailwind 类的补全和伪类变体的补全建议,在 HTML 和 CSS 文件中的类上悬停或自动补全时预览生成的 CSS。PhpStorm 识别tailwind.config.js文件并根据您对它们进行的自定义提供补全。
在你开始前
确保您的计算机上有Node.js。
确保在Settings/Preferences |的Installed选项卡中启用了CSS捆绑插件。插件页面,如管理插件中所述。
在Settings/Preferences |上安装并启用Tailwind CSS插件 插件页面,选项卡Marketplace,如从 JetBrains 存储库安装插件中所述。
安装 Tailwind CSS
打开嵌入式终端( Alt+F12) 并键入:
npm install tailwindcss postcss autoprefixer
要配置 Tailwind CSS 安装,请在项目的根目录中生成tailwind.config.js配置文件。在嵌入式终端( Alt+F12) 中,键入:
npx tailwindcss init
从Tailwind CSS 官方网站了解更多信息。
完成 Tailwind 课程
@apply
PhpStorm 在指令后自动完成 HTML 文件和 CSS 文件中的 Tailwind 类。
PhpStorm 建议在 JavaScript 字符串文字中完成 Tailwind 类。
还显示了伪类变体的完成建议。
预览生成的 CSS
当您将鼠标悬停在 HTML 或 CSS 文件中的 Tailwind 类上时,PhpStorm 会向您显示生成的 CSS 的预览。
当您完成代码时,预览也会显示在文档弹出窗口 ( ) 中。Ctrl+Q
编辑您的 tailwind.config.js
PhpStorm 根据您通过tailwind.config .js配置文件进行的自定义提供代码完成。例如,如果您使用新颜色定义自定义主题,则新生成的具有自定义颜色名称的类将显示在完成弹出窗口中。