参考文档
https://www.tailwindcss.cn/docs/installation
https://tailwindcss.com/docs/guides/vite#vue
npm create vite@latest
cnpm i
tailwindcss
framework use vue
npm install -D tailwindcss postcss autoprefixer
执行下面命令自动创建配置文件
npx tailwindcss init -p
tailwind.config.js
需要修改content部分，
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
src/style.css添加
@tailwind base;
@tailwind components;
@tailwind utilities;
如果是自己定义的项目，确保入口 main.ts 使用了import './style.css'
npm install
vscode提示 安装 tailwind css intellisense
然后测试使用
如果字体颜色发生变化则代表成功。
<template>
<div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
<!-- 左 -->
<div>
<div class="text-red-600 text-3xl">hellow world</div>
</div>
<!-- 中 -->
<div></div>
<!-- 右 -->
<div></div>
</div>
</template>
