Vue3集成Tailwind CSS

Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的

对于PostCSS的插件使用，我们再使用的过程中一般都需要如下步骤：

PostCSS 配置文件 postcss.config.js，新增 tailwindcss 插件。

TaiWindCss插件需要一份配置文件，比如:tailwind.config.js。

PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网

1、安装初始化项目

npm init vue@lastest

2、安装TailWind以及其他依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3、生成配置文件

npx tailwindcss init -p

 

配置 - Tailwind CSS 中文文档

4、修改配置文件 tailwind.config.js

5、创建一个css文件，内容如下：

 在main.ts 引入

 

 

 6、然后就可以在标签中使用了，使用实例如下：

 具体使用，参考中文文档进行按需写入即可。