文章归档：https://www.yuque.com/u27599042/coding_star/yqzi9olphko9ity1

Tailwind CSS 官网：https://www.tailwindcss.cn/docs/installation/using-postcss

安装

pnpm i -D tailwindcss postcss autoprefixer

生成配置文件

npx tailwindcss init -p

配置 postcss

postcss.config.js

export default {plugins: {tailwindcss: {},autoprefixer: {},},
}

配置 Tailwind CSS 生效的文件

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {// 配置 Tailwind CSS 使用暗黑模式的形式(类名 class="dark")darkMode: 'class',// content:[], 默认为空// Tailwind CSS 在如下配置的路径中的文件中生效content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

在项目中引入 Tailwind CSS

src/styles/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

在 main.js 中引入

import '@/styles/tailwind.css'

使用

Tailwind CSS 类名参考官网：https://www.tailwindcss.cn/docs/installation/using-postcss

<!-- 
w-screen ==> width: 100vw;
h-screen ==> height: 100vh;
bg-gray-100 ==> 背景颜色
dark:bg-neutral-800 ==> 暗黑模式下的背景颜色
-->
<div class="w-screen h-screen bg-gray-100 dark:bg-neutral-800"><!-- ... -->
</div>