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