Vue中使用TailWindCSS-亲测可用！！！！

不念不忘少年蓝@ 2021-07-25 20:04 947阅读 4赞

推荐一个网站，里面可以查询所有的TailWindCSS的class样式：[https://nerdcave.com/tailwind-cheat-sheet][https_nerdcave.com_tailwind-cheat-sheet]

> vue中安装tailwindcss遇到了各种坑，不是版本不兼容，就是缺个文件，还是那种怎么都安装不了的...
> 
> 在安装-卸载-安装-卸载重复了几十次之后（心态炸了），总算安装成功。总结步骤如下

项目根目录下执行以下命令，大概安装3分钟：

npm install tailwindcss -D

> 注意：1、这里要用npm，不要用cnpm。2、最好用install，不要简写i，不然有莫名其妙的问题。3、加上-D安装到开发依赖

在等待安装的过程中，就在api/assets文件夹中新建 **tailwindcss.css**，如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

@import "tailwindcss/base";
    @import "tailwindcss/components";
    @import "tailwindcss/utilities";

main.js中引入:（一定不要忘了这一步）

> 注意：不要用 import 'tailwindcss/tailwindcss.css'这种方式，没用的。最好还是用自己新建tailwindcss.css的方式

import "./assets/tailwindcss.css"

在项目根目录执行以下命令：

> 注意：一定要加-p，才会生成两个文件。如果不加或者加--full的话都只生成taiwind.config.js这一个文件，而postcss.config.js还需要自己手动配置，相对繁琐。因此推荐加-p，直接一步到位

npx tailwindcss init -p

发现在根目录下多了2个文件.

> 这两个文件生成后可以不用管，直接用默认的配置，但是不能没有这两个文件。
> 
> 只要这里能正确安装好这两个文件，然后继续按照以下步骤装，基本上就可安装成功

![20210509084742205.png][]![20210509023740485.png][]

接下来我们依次执行以下2个命令启动项目：

cnpm i
    
    npm run serve

发现会报这个错误，如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

解决方法：先卸载，再安装

卸载：大概15秒

npm uninstall tailwindcss postcss autoprefixer

> 注意：不要直接在安装最开始就用下面这个命令，否则安装会失败。还是要安装以上步骤一步一步来

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

安装大概30秒

然后重新启动即可成功：npm run serve。

另外，vscode中推荐安装插件：

Tailwind CSS Explorer

Tailwind CSS IntelliSense

如果安装后tailwindcss的代码提示未出现，那么可以先敲一个空格，就可以出现提示了

[https_nerdcave.com_tailwind-cheat-sheet]: https://nerdcave.com/tailwind-cheat-sheet
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/03ea0a588a074d08814d2d54795fe102.png
[20210509084742205.png]: https://img-blog.csdnimg.cn/20210509084742205.png
[20210509023740485.png]: /images/20210725/e9ab80f4ed72492285e77f2891a04927.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/320d8d01f3674dc8a255bdda23964dae.png