听说你还不会 Tailwind CSS（基础·上篇）

type

status

date

slug

summary

1. 前言

在使用 Vue 开发时，最常用的 UI 库就是 ElementUI 或 Ant Design Vue 了。而在开发 React 时，特别是使用 Next.js 时，就不得不考虑 Tailwind CSS 这种方案了。

使用 Tailwind CSS 就像在使用 Bootstrap，写出对应类名就能快速创建样式。如果你对CSS很有感觉，那么掌握 Tailwind CSS 只要 1 小时。

适用范围：

虽然在 React 中结合得比较紧密，但是也同样适用于其他的主流框架，例如：Vite、Nuxt、Angular，甚至是 Laravel、Ruby on Rails……

文档在此：https://tailwindcss.com/docs/installation/framework-guides

关于安装步骤就不再赘述了，官网上写得很详细了。

篇幅介绍：

基础（上中下）篇：Tailwind CSS 在应用中的基本使用方法

进阶篇：如何复用样式以及 Tailwind CSS 配置项

框架篇：shadcn ui 的使用

响应式篇：如何构建响应式网页

接下来以 3.4.1 版本为例，进入基础篇的具体内容。

2. 宽高

2.1 宽度高度

预定义数值类（w-数值、h-数值）

通过 w-数值 和 h-数值 就能分别设定宽度和高度，例如：

w-1 的 1 表示 0.25 rem，即 4 px，以此类推，w-20 表示 5 rem，即 width: 80px;。同理，h-20 表示 height: 80px; 。

bg-blue-500 很好理解，就是 background-color 为蓝色，其中 500 表示某种饱和度的蓝色：数值越大颜色越深。

手动书写任意值（w-[]、h-[]）

想要更加直观可控，以 width 为例，w-20 实际上等价于：w-[80px] 、w-[5rem]、w-[5em]。

百分比（w-分子/分母、h-分子/分母）

百分比的有效范围为：1/2, 1/3, 2/3, 1/4, 2/4, …, 11/12，整数不在此范围，例如 2/2, 3/3 等。

w-1/2 👉 width: 50%;

w-1/3 👉 width: 33.333333%;

w-1/4 👉 width: 25%;

w-full、w-screen

一般来说，占满宽度有两种情况。一个是占据容器的 100% 宽度，一个是占据设备屏幕的 100% 宽度。（另外还有 w-svw、w-lvw、w-dvw）

w-full 👉 width: 100%;

w-screen 👉 width: 100vw;

h-svh、h-lvh、h-dvh

在高度方面也是类似，也有 h-full 和 h-screen。由于设备的不同，考虑到手机 h5 之类的情况，使用以下更为灵活的发高度值：

h-svh 👉 height: 100svh;

h-lvh 👉 height: 100lvh;

h-dvh 👉 height: 100dvh;

在实际使用中，用起来第三种 h-dvh 会更加灵活。

2.2 最小/大宽度高度

min-w-[]、max-w-[]

min-h-[]、max-h-[]

这些一般用于响应式设计或防止溢出。下面是一个按钮文本防止宽度溢出的设计：

min-w-20 👉 min-width: 5rem; /* 80px */

inline-block 👉 display: inline-block;

leading-10 👉 line-height: 2.5rem; /* 40px */

text-center 👉 text-align: center;

2.3 size

size-* 可以快速创建出一个正方形。注意，低版本的 Tailwind CSS 可能没有这个特性。

等价于：

3. 边距

外边距、内边距、空间间隔。

3.1 margin

以 mr-* 为例，表示右侧的外边距。

其他方位：

mt-* 👉 margin-top: _;

mb-* 👉 margin-bottom: _;

ml-* 👉 margin-left: _;

mx-* 👉 margin-left: _; margin-right: _;

my-* 👉 margin-top: _; margin-bottom: _;

内容区块水平方向居中：

mx-auto 👉 margin: 0 auto;

3.2 padding

padding 部分和 margin 类似。

3.3 space

将 space-x-* 或 space-y-* 写在容器上，用来控制子元素之间的间距。

水平方向排列

垂直方向排列

4. 边框

线宽、线类型、弧度。

4.1 线宽 + 颜色

通过 border-* 设定线宽，颜色的设置也很简单：border-颜色-数值。

如果想要设定某一方向的边框：border-*-数值

border-t-数值 👉 border-top-width: _;

border-r-数值 👉 border-right-width: _;

border-b-数值 👉 border-bottom-width: _;

border-l-数值 👉 border-left-width: _;

border-x-数值 👉 border-left-width: _; border-right-width: _;

border-y-数值 👉 border-top-width: _; border-right-width: _;

注意 ⚠️：如果不加数值（例如：border-t），表示特定方向上的线宽为 1px。border-0 就是 border-width: 0px;。

4.2 线类型

border-solid 👉 border-style: solid;

border-dashed 👉 border-style: dashed;

border-dotted 👉 border-style: dotted;

border-double 👉 border-style: double;

4.3 弧度

rounded 👉 border-radius: 0.25rem; /* 4px */

rounded-md 👉 border-radius: 0.375rem; /* 6px */

rounded-lg 👉 border-radius: 0.5rem; /* 8px */

rounded-full 👉 border-start-start-radius: 9999px; border-end-start-radius: 9999px;

5. 文本

字体（大小、对齐方式、加粗……）

5.1 字体大小

和前述章节类似，有关字体大小的相关使用也可以通过 text-数值、text-[] 的方式进行：

其中，text-base、text-md、text-[16px] 都是一样的，取浏览器的字体默认值 16px。

5.2 文本对齐方式

5.3 字体斜体与加粗

6. 颜色

颜色在之前的案例中都有接触，主要为：字体颜色、边框颜色、背景颜色、背景渐变色图像。

字体、边框、背景、不同透明度的背景颜色都很容易理解。需要提一点的是渐变色，这里需要用 from-颜色A、via-颜色B、to-颜色C 来表示从颜色 A 经过 B，最后过渡到 C 的颜色变化。

7. 总结

基础上篇从宽度高度开始逐步展现 Tailwind CSS 基本的使用规则，包括边距、边框、文本、颜色等常用的样式属性。从行文也可以看出，有了上面的铺垫，到了颜色部分其实就可以依靠以往的开发经验猜出对应的属性使用了。下篇将介绍伪类、伪元素、布局、定位等常用属性。