taiwindcss
1.安装
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
这会创建一个 tailwind.config.js 文件。注意：一定通过px tailwindcss init方式创建
2.tailwind.config.js
module.exports = {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx,vue}', // 确保 Vue 文件被扫描
],
theme: {
extend: {},
},
p3.src/assets/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;4.main.ts
import './assets/tailwind.css' // 引入 Tailwind CSS 样式文件5.因为tailwindcss是依赖于postcss
创建postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}6.问题，如果这几个步骤发现没有实现，删除包以后重新试一下
<div class=" bg-red-900 w-[100px] h-[100px] text-[red]">
大屏
</div>