vue3下载安装
1
2
3
4
| //安装
npm install -D tailwindcss postcss autoprefixer
//生成配置文件
npx tailwindcss init -p
|
在tailwind.config.js指定作用目录，并增加对 vue 文件的识别
1
2
3
4
5
6
7
8
9
10
11
| /** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx,vue}",
],
theme: {
extend: {},
},
plugins: [],
}
|
在项目的公共 css 文件（src/style.css）中添加以下内容，用 @tailwind 指令添加 Tailwind 功能模块。
1
2
3
| @tailwind base;
@tailwind components;
@tailwind utilities;
|
外间距
1
2
3
4
| mt-0 margin-top: 0px;
mr-0 margin-right: 0px;
mb-0 margin-bottom: 0px;
ml-0 margin-left: 0px;
|
内边距
1
2
3
4
| pt-0 padding-top: 0px;
pr-0 padding-right: 0px;
pb-0 padding-bottom: 0px;
pl-0 padding-left: 0px;
|
宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5 width: 0.375rem; /* 6px */
w-2 width: 0.5rem; /* 8px */
w-2.5 width: 0.625rem; /* 10px */
w-3 width: 0.75rem; /* 12px */
w-3.5 width: 0.875rem; /* 14px */
w-4 width: 1rem; /* 16px */
w-5 width: 1.25rem; /* 20px */
w-6 width: 1.5rem; /* 24px */
w-7 width: 1.75rem; /* 28px */
w-8 width: 2rem; /* 32px */
w-9 width: 2.25rem; /* 36px */
w-10 width: 2.5rem; /* 40px */
|
高度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| Class
Properties
h-0 height: 0px;
h-px height: 1px;
h-0.5 height: 0.125rem; /* 2px */
h-1 height: 0.25rem; /* 4px */
h-1.5 height: 0.375rem; /* 6px */
h-2 height: 0.5rem; /* 8px */
h-2.5 height: 0.625rem; /* 10px */
h-3 height: 0.75rem; /* 12px */
h-3.5 height: 0.875rem; /* 14px */
h-4 height: 1rem; /* 16px */
h-5 height: 1.25rem; /* 20px */
h-6 height: 1.5rem; /* 24px */
h-7 height: 1.75rem; /* 28px */
h-8 height: 2rem; /* 32px */
h-9 height: 2.25rem; /* 36px */
h-10 height: 2.5rem; /* 40px */
|
字体大小
1
2
3
4
5
6
7
8
9
10
11
12
| text-xs font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */
text-2xl font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */
|
文本对齐
1
2
3
| text-left text-align: left;
text-center text-align: center;
text-right text-align: right;
|
文本颜色
1
2
3
4
5
6
7
8
9
10
11
| text-transparent color: transparent;
Aa
text-black color: rgb(0 0 0);
Aa
text-white color: rgb(255 255 255);
Aa
text-slate-50 color: rgb(248 250 252);
Aa
text-slate-100 color: rgb(241 245 249);
Aa
text-slate-200 color: rgb(226 232 240);
|
文本溢出
1
2
3
4
| truncate overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-ellipsis
|
背景颜色
1
2
3
4
| bg-black background-color: rgb(0 0 0);
bg-white background-color: rgb(255 255 255);
bg-slate-50 background-color: rgb(248 250 252);
bg-slate-100 background-color: rgb(241 245 249);
|
圆角
1
2
3
4
5
6
7
8
| rounded-none border-radius: 0px;
rounded-sm border-radius: 0.125rem; /* 2px */
rounded border-radius: 0.25rem; /* 4px */
rounded-md border-radius: 0.375rem; /* 6px */
rounded-lg border-radius: 0.5rem; /* 8px */
rounded-xl border-radius: 0.75rem; /* 12px */
rounded-2xl border-radius: 1rem; /* 16px */
rounded-3xl border-radius: 1.5rem; /* 24px */
|
边框
1
2
3
| border-2 border-width: 2px;
border-4 border-width: 4px;
border-8 border-width: 8px;
|
flex布局
1
2
| flex-row flex-direction: row;
flex-col flex-direction: column;
|
换行
1
2
3
| flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;
|
