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: {},},p
3.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>