WebStorm 集成 Tailwind CSS 后,可能会出现提示不智能的问题。这通常是由于 WebStorm 默认没有对 Tailwind CSS 的样式进行语法解析,导致无法提供智能提示。
要解决这个问题,你可以手动配置 WebStorm,以便让其支持 Tailwind CSS 的智能提示功能。具体的步骤如下:
-
在 WebStorm 中打开项目,找到
File
>Settings
(或者使用快捷键Ctrl + Alt + S
)进入设置页面。 -
在左侧菜单栏中找到
Languages & Frameworks
>Stylesheets
,并选择CSS
。 -
在右侧的选项卡中,将
CSS dialect
选择为PostCSS
,并勾选Enable PostCSS support
。 -
在
Plugins
选项中,搜索tailwind
并安装。 -
确认上述步骤配置无误后,重新启动 WebStorm 以使更改生效。
完成上述步骤后,WebStorm 将会智能解析 Tailwind CSS 的样式,并提供相应的代码提示功能。
需要注意的是,如果你使用的是 WebStorm 2020.2 以下版本,则需要手动配置 PostCSS 的插件以及相关配置文件,以支持 Tailwind CSS。具体配置方法可以参考 Tailwind CSS 官方文档中的说明。
个人笔记记录 2021 ~ 2025