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，删除所有配置！

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

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了！

在指令中一样可以使用

鼠标悬停会有css样式预览

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

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

标签：npm,2021.3,tailwind,webstorm,智能,版本,postcss
来源： https://blog.csdn.net/hunt_er/article/details/122339725