webstorm tailwind 不智能提示的解决方法

近期项目中采用了tailwind,但是由于开发习惯使用webstorm,使用tailwind是没有智能提示,看到别人使用vscode时有tailwind的智能提示,用起来非常爽,无奈,试用了一段vscode,智能提示确实很爽,但是还是习惯用webstorm,又转了回来。

终于,webstorm发布了2021.3版本,新添加了tailwind的支持。

重要提示:

想要在webstorm中获得比较好的tailwind支持,需要将webstorm升级到2021.3之后的版本,我现在使用的是2021.3.1版本,建议升级到2021.3.1版本,这个版本比2021.3版本更好的支持tailwind了!

升级必看:

当然,一个更重要的提示,在2021.3版本以后,webstorm正版验证需要登录验证的方式,以往的破解方法全部失效! 所以你需要先获得一个验证授权,以使用webstorm。否则,你升级后是无法使用ide的!

升级方法:

以下,先确保你升级后可以获得ide验证授权!否则,你什么都做不了!

1.先备份好webstorm设置,然后在控制面版中彻底卸载webstorm,删除所有配置!

webstorm tailwind 不智能提示的解决方法

备份数据,升级后可以导入原有配置。

2.官网下载webstorm2021.3.1版本,安装,导入配置。

3.打开你的项目,卸载掉tailwind,

npm uninstall tailwindcss postcss autoprefixer

然后删除掉node_modules文件夹,和package-lock.json文件,然后在安装tailwind,使用如下命令以确保postcss的兼容性。

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

然后执行 npm install 安装项目依赖

npm install

4.添加tailwind,postcss配置文件,如果你已经有tailwind,postcss配置文件跳过该步骤,

npx tailwindcss init -p

做这些的目的感觉就像是让webstorm检测到你使用了tailwind,接下来就可以在webstorm中使用tailwind了!

webstorm tailwind 不智能提示的解决方法

webstorm tailwind 不智能提示的解决方法

在指令中一样可以使用

webstorm tailwind 不智能提示的解决方法

鼠标悬停会有css样式预览

唯一感觉的不足是代码提示里没有css预览,下图是vscode的代码提示,有一个css预览,webstorm里暂时好像没有,不过影响不大,不影响使用~

webstorm tailwind 不智能提示的解决方法

 前面的tw-是我配置的tailwind前缀,用以区分原有css。

上一篇:rem使用


下一篇:webpac5 + vite2 入门