文章归档: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>