vite + vue3 + tailwindcss_pnpm tailwindcss vue3

要在Vite Vue3中使用Tailwind CSS
创建项目

pnpm create vite
1

1. 在项目根目录中打开终端，并运行以下命令安装Tailwind CSS和相关依赖：

pnpm install tailwindcss postcss autoprefixer
1

2. 执行 npx tailwindcss init，自动生成配置文件
3. 在tailwind.config.js 文件中，您可以自定义Tailwind CSS的配置，内容如下：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
1
2
3
4
5
6
7
8
9
10
11

4. postcss.config.js内容如下：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
1
2
3
4
5
6

5. 引入tailwind.css
   tailwind.css：

@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3

在main.js引入

import 'tailwind.css'
1

6. 重启开发服务器，现在，你可以在Vue文件中使用tailwind css，如：

<div class="bg-blue-500 text-white p-4">Hello, Tailwind CSS!</div>
1

字符大小设置

请使用 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；）
1
2
3
4
5
6
7
8
9
10
11
12
13

使用：

<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>
1
2
3
4
5
6
7
8
9
10
11
12

字符粗细设置

.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；）
1
2
3
4
5
6
7
8
9

使用：

<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>
1
2
3
4
5
6
7
8
9
10
11

文字颜色设置

格式： 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；）
1
2
3
4
5
6
7
8
9

案例

创建按钮

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">前端晚间课</button>
1

Tailwind CSS 自定义

按钮有些属性可以复用，在tailwind.css的@tailwind components;指令后写入：

@tailwind components;

.btn{
    @apply font-semibold text-white py-2 px-4 rounded;
}
1
2
3
4
5

使用：

    <button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">前端晚间课</button>
    <button class="bg-red-700 btn">前端晚间课</button>
1
2

伪类设置悬停

<button class="bg-red-700 btn hover:bg-red-500">前端晚间课</button>

1
2

伪类设置焦点

.btn{
    @apply font-semibold text-white py-2 px-4 rounded-full;
}
1
2
3

<button class="bg-red-700 btn focus:bg-red-500">前端晚间课</button>

1
2