听说你还不会 Tailwind CSS（基础·上篇）-易微帮

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……

文档在此：

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

篇幅介绍：

基础（上下）篇：Tailwind CSS 在应用中的基本使用方法
进阶篇：如何复用样式以及 shadcn ui 的使用
响应式篇：如何构建响应式网页

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

2. 宽高

2.1 宽度高度

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

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

<div class="w-20 h-20 bg-blue-500">width and height</div>

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

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

数值类.png

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

<div class="w-[80px] h-20 bg-blue-500">width and height</div>
<div class="w-[5rem] h-20 bg-blue-500">width and height</div>
<div class="w-[5em] h-20 bg-blue-500">width and height</div>

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

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

<div class="w-1/2 h-20 bg-blue-300">w-1/2</div>
<div class="w-1/3 h-20 bg-blue-300">w-1/3</div>
<div class="w-1/4 h-20 bg-blue-300">w-1/4</div>

百分比的有效范围为：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%;

百分比.png

w-full、w-screen

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

<div class="w-[500px] border">
	<div class="w-full h-20 bg-blue-100">w-full</div>
	<div class="w-screen h-20 bg-blue-100">w-screen</div>
</div>

w-full 👉 width: 100%;
w-screen 👉 width: 100vw;

100%.png

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-[]

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

<div class="inline-block min-w-20 h-10 leading-10 bg-green-200 text-center">
  btn
</div>
<br />
<div class="inline-block min-w-20 h-10 leading-10 bg-green-400 text-center">
  button
</div>
<br />
<div class="inline-block min-w-20 h-10 leading-10 bg-green-600 text-center">
  my long text button
</div>

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 可能没有这个特性。

<div class="w-20 h-20 bg-blue-500">width and height</div>

等价于：

<div class="size-20 bg-blue-500">width and height</div>

3. 边距

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

3.1 margin

<div class="mr-2 inline bg-red-200">inline1</div>
<div class="mr-2 inline bg-red-300">inline2</div>
<div class="mr-2 inline bg-red-400">inline3</div>

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

其他方位：

mt-* 👉 margin-top: _;
mb-* 👉 margin-bottom: _;
ml-* 👉 margin-left: _;
mx-* 👉 margin-left: _; margin-right: _;
my-* 👉 margin-top: _; margin-bottom: _;

内容区块水平方向居中：

<main class="w-[1280px] mx-auto h-screen bg-sky-200">
  ...
</main>

mx-auto 👉 margin: 0 auto;

内容区块水平方向居中.png

3.2 padding

<p class="py-5 px-10 bg-yellow-300">#p1</p>
<p class="py-5 px-10 bg-yellow-400">#p2</p>
<p class="py-5 px-10 bg-yellow-500">#p3</p>

padding 部分和 margin 类似。

px-10 py-5.png

px-10 py-5

3.3 space

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

水平方向排列

<div class="space-x-4">
  <div class="inline-block bg-slate-400">01</div>
  <div class="inline-block bg-slate-500">02</div>
  <div class="inline-block bg-slate-600">03</div>
</div>

垂直方向排列

<div class="space-y-4">
  <div class="bg-emerald-300">01</div>
  <div class="bg-emerald-400">02</div>
  <div class="bg-emerald-500">03</div>
</div>

space-x-4 以及 space-y-4 的间距效果.png

space-x-4 以及 space-y-4 的间距效果

4. 边框

线宽、线类型、弧度。

4.1 线宽 + 颜色

<div class="border border-sky-500 size-10"></div>
<div class="border-2 border-sky-500 size-10"></div>
<div class="border-4 border-sky-500 size-10"></div>

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

线宽+颜色.png

如果想要设定某一方向的边框：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-[] 的方式进行：

<p class="text-sm">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-base">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-md">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-[16px]">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-lg">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-xl">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>

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

字体大小.png

5.2 文本对齐方式

<p class="text-left">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  adipisci minima dolore sit quas officiis velit sint! Dicta ad ea
  quaerat, sapiente provident et nihil cupiditate est, vero quo soluta.
</p>
<p class="text-center">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  adipisci minima dolore sit quas officiis velit sint! Dicta ad ea
  quaerat, sapiente provident et nihil cupiditate est, vero quo soluta.
</p>
<p class="text-right">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  adipisci minima dolore sit quas officiis velit sint! Dicta ad ea
  quaerat, sapiente provident et nihil cupiditate est, vero quo soluta.
</p>
<p class="text-justify">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  adipisci minima dolore sit quas officiis velit sint! Dicta ad ea
  quaerat, sapiente provident et nihil cupiditate est, vero quo soluta.
</p>

文本对其方式.png

5.3 字体斜体与加粗

<p class="italic">Lorem ipsum! -- italic</p>
<p class="font-thin">Lorem ipsum! -- font-weight: 100;</p>
<p class="font-light">Lorem ipsum! -- font-weight: 300;</p>
<p class="font-normal">Lorem ipsum! -- font-weight: 400;</p>
<p class="font-bold">Lorem ipsum! -- font-weight: 700;</p>
<p class="font-black">Lorem ipsum! -- font-weight: 900;</p>

斜体与加粗.png

6. 颜色

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

<p class="text-red-500">Lorem ipsum! -- 文本颜色</p>
<p class="border-2 border-sky-500">Lorem ipsum! -- 边框颜色</p>
<p class="bg-orange-500">Lorem ipsum! -- 背景颜色</p>
<p class="bg-orange-500/75">Lorem ipsum! -- 背景颜色（75% 透明度）</p>
<p class="bg-orange-500/50">Lorem ipsum! -- 背景颜色（50% 透明度）</p>
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
  向右渐变（purple-500 👉 pink-500）
</div>
<div class="bg-gradient-to-l from-transparent to-sky-500">
  向左渐变（sky-500 👈 transparent）
</div>
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
  向右渐变（indigo-500 👉 purple-500 👉 pink-500）
</div>

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

各种颜色.png

7. 总结

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

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