[@toc]
一、安装
// 安装
yarn add -D tailwindcss
二、配置文件
// 生成配置文件
npx tailwindcss init
// 打开根目录下的 tailwind.config.js 文件,添加如下:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{vue,ts,js,tsx,jsx}'],
theme: {
extend: {}
},
plugins: []
}
三、导入
在main.js
中导入
import 'tailwindcss/tailwind.css'
四、vite配置
import tailwindcss from 'tailwindcss'
export default defineConfig({
// ...
css: {
postcss: {
plugins: [
tailwindcss,
]
}
},
// ...
})
五、使用
<template>
<div>
<div class="text-teal-600">试试 tailwind.css</div>
<div class="w-32 h-32 bg-blue-500" />
</div>
</template>