WebStorm 集成 Tailwind CSS 后,可能会出现提示不智能的问题。这通常是由于 WebStorm 默认没有对 Tailwind CSS 的样式进行语法解析,导致无法提供智能提示。

要解决这个问题,你可以手动配置 WebStorm,以便让其支持 Tailwind CSS 的智能提示功能。具体的步骤如下:

  1. 在 WebStorm 中打开项目,找到 File > Settings(或者使用快捷键 Ctrl + Alt + S)进入设置页面。

  2. 在左侧菜单栏中找到 Languages & Frameworks > Stylesheets,并选择 CSS

  3. 在右侧的选项卡中,将 CSS dialect 选择为 PostCSS,并勾选 Enable PostCSS support

  4. Plugins 选项中,搜索 tailwind 并安装。

  5. 确认上述步骤配置无误后,重新启动 WebStorm 以使更改生效。

完成上述步骤后,WebStorm 将会智能解析 Tailwind CSS 的样式,并提供相应的代码提示功能。

需要注意的是,如果你使用的是 WebStorm 2020.2 以下版本,则需要手动配置 PostCSS 的插件以及相关配置文件,以支持 Tailwind CSS。具体配置方法可以参考 Tailwind CSS 官方文档中的说明。

个人笔记记录 2021 ~ 2025