1.执行以下命令安装依赖
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
2.cmd执行命令npm i 下载项目所用到的依赖
npm i
3.在项目根目录下创建一个 postcss.config.js 文件
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
4.在项目根目录下,运行以下命令生成 Tailwind CSS 的默认配置文件
npx tailwindcss init
5.在根目录/assets/style目录下创建tailwindcss.css文件并在main.js引入
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
在入口文件main.js里引入这个文件
import './assets/style/tailwindcss.css'
6.页面中测试是否成功
<div class="bg-blue-500 text-white p-4 text-red-400">
This is a sample component using Tailwind CSS!
</div>
6.启动项目
npm run serve
7.测试是否生效
8.下载vscode插件 Tailwind CSS IntelliSense
此时 代码会有提示
9.查阅官网文档 使用对应样式
官网链接:tailwind