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

推荐一个网站，里面可以查询所有的TailWindCSS的class样式：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，如下

@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个文件.

这两个文件生成后可以不用管，直接用默认的配置，但是不能没有这两个文件。

只要这里能正确安装好这两个文件，然后继续按照以下步骤装，基本上就可安装成功

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

cnpm i

npm run serve

发现会报这个错误，如下 

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

卸载：大概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的代码提示未出现，那么可以先敲一个空格，就可以出现提示了