标签：npm 2021.3 tailwind webstorm 智能 版本 postcss

近期项目中采用了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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。