要在Vite Vue3中使用Tailwind CSS
创建项目
pnpm create vite
- 在项目根目录中打开终端，并运行以下命令安装Tailwind CSS和相关依赖：
pnpm install tailwindcss postcss autoprefixer
- 执行
npx tailwindcss init，自动生成配置文件 - 在tailwind.config.js 文件中，您可以自定义Tailwind CSS的配置，内容如下：
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}
- postcss.config.js内容如下：
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
- 引入tailwind.css
tailwind.css：
@tailwind base;
@tailwind components;
@tailwind utilities;
在main.js引入
import 'tailwind.css'
- 重启开发服务器，现在，你可以在Vue文件中使用tailwind css，如：
<div class="bg-blue-500 text-white p-4">Hello, Tailwind CSS!</div>
字符大小设置
请使用 text- {size}。大小可以取 13 个值
.text-xs（字体大小：.75rem；）
.text-sm（字体大小：.875rem；）
.text-base（字体大小：1rem;）
.text-lg（字体大小：1.125rem；）
.text-xl（字体大小：1.25rem；）
.text-2xl（字体大小：1.5rem；）
.text-3xl（字体大小：1.875rem；）
.text-4xl（字体大小：2.25rem；）
.text-5xl（字体大小：3rem；）
.text-6xl（字体大小：4rem；）
.text-7xl（字体大小：4.5rem；）
.text-8xl（字体大小：6rem；）
.text-9xl（字体大小：8rem；）
使用：
<div class="text-center mt-10">
<p class="text-xs">前端晚间课</p>
<p class="text-sm">前端晚间课</p>
<p class="text-base">前端晚间课</p>
<p class="text-lg">前端晚间课</p>
<p class="text-xl">前端晚间课</p>
<p class="text-2xl">前端晚间课</p>
<p class="text-3xl">前端晚间课</p>
<p class="text-4xl">前端晚间课</p>
<p class="text-5xl">前端晚间课</p>
<p class="text-6xl">前端晚间课</p>
</div>
字符粗细设置
.font-thin (font-weight: 100;)
.font-extralight (font-weight: 200;)
.font-light (font-weight: 300;)
.font-normal (font-weight: 400;)
.font-medium (font-weight: 500;)
.font-semibold (font-weight: 600;)
.font-bold（font-weight：700；）
.font-extrabold（font-weight：800；）
.font-black（font-weight：900；）
使用：
<div class="text-center mt-10">
<p class="font-thin">前端晚间课</p>
<p class="font-extralight">前端晚间课</p>
<p class="font-light">前端晚间课</p>
<p class="font-normal">前端晚间课</p>
<p class="font-medium">前端晚间课</p>
<p class="font-semibold">前端晚间课</p>
<p class="font-bold">前端晚间课</p>
<p class="font-extrabold">前端晚间课</p>
<p class="font-black">前端晚间课</p>
</div>
文字颜色设置
格式： text- {color}-{color depth}
text-green-100（颜色：# f0fff4;）
text-green-200（颜色：#c6f6d5；）
text-green-300（颜色：#9ae6b4；）
text-green-400（颜色：#68d391；）
text-green-500（颜色：#48bb78；）
text-green-600（颜色：#38a169；）
text-green-700（颜色：#2f855a；）
text-green-800（颜色：#276749；）
text-green-900（颜色：#22543d；）
案例
创建按钮
<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">前端晚间课</button>
Tailwind CSS 自定义
按钮有些属性可以复用，在tailwind.css的@tailwind components;指令后写入：
@tailwind components;
.btn{
@apply font-semibold text-white py-2 px-4 rounded;
}
使用：
<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">前端晚间课</button>
<button class="bg-red-700 btn">前端晚间课</button>
伪类设置悬停
<button class="bg-red-700 btn hover:bg-red-500">前端晚间课</button>
伪类设置焦点
.btn{
@apply font-semibold text-white py-2 px-4 rounded-full;
}
<button class="bg-red-700 btn focus:bg-red-500">前端晚间课</button>
