## 1. 前言在使用 Vue 开发时，最常用的 UI 库就是 ElementUI 或 Ant Design Vue 了。而在开发 React 时，特别是使用 Next.js 时，就不得不考虑 Tailwind CSS 这种方案了。使用 Tailwind CSS 就像在使用 Bootstrap，写出对应类名就能快速创建样式。如果你对CSS很有感觉，那么掌握 Tailwind CSS 只要 1 小时。欢迎加入[技术交流群](https://juejin.cn/user/2154698521972423/pins)。 **适用范围：** 虽然在 React 中结合得比较紧密，但是也同样适用于其他的主流框架，例如：Vite、Nuxt、Angular，甚至是 Laravel、Ruby on Rails…… 文档在此：关于安装步骤就不再赘述了，官网上写得很详细了。 **篇幅介绍：** * 基础（上中下）篇：Tailwind CSS 在应用中的基本使用方法 * 进阶篇：如何复用样式以及 Tailwind CSS 配置项 * 框架篇：shadcn ui 的使用 * 响应式篇：如何构建响应式网页接下来以 3.4.1 版本为例，进入基础篇的具体内容。 - [听说你还不会 Tailwind CSS（基础·上篇）](https://juejin.cn/post/7363534953651257353) - [听说你还不会 Tailwind CSS（基础·中篇）](https://juejin.cn/post/7363928559922724901) - [听说你还不会 Tailwind CSS（基础·下篇）](https://juejin.cn/post/7364409181053059098) - [听说你还不会 Tailwind CSS（进阶·上篇）](https://juejin.cn/post/7365802529923399689) ## 2. 宽高 ### 2.1 宽度高度 1. 预定义数值类（`w-数值`、`h-数值`）通过 `w-数值` 和 `h-数值` 就能分别设定宽度和高度，例如： ```html

width and height

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

2. 手动书写任意值（`w-[]`、`h-[]`） ```html

width and height

``` 想要更加直观可控，以 width 为例，`w-20` 实际上等价于：`w-[80px]` 、`w-[5rem]`、`w-[5em]`。 3. 百分比（`w-分子/分母`、`h-分子/分母`） ```tsx

w-1/2

w-1/3

w-1/4

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

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

w-full

w-screen

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

100%.png

5. `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 最小/大宽度高度 1. `min-w-[]`、`max-w-[]` 2. `min-h-[]`、`max-h-[]` 这些一般用于响应式设计或防止溢出。下面是一个按钮文本防止宽度溢出的设计： ```html

btn

button

my long text button

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

width and height

``` 等价于： ```html

width and height

``` ## 3. 边距外边距、内边距、空间间隔。 ### 3.1 margin ```tsx

inline1

inline2

inline3

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

其他方位： * mt-\* 👉 `margin-top: _;` * mb-\* 👉 `margin-bottom: _;` * ml-\* 👉 `margin-left: _;` * mx-\* 👉 `margin-left: _; margin-right: _;` * my-\* 👉 `margin-top: _; margin-bottom: _;` 内容区块水平方向居中： ```html

...

``` mx-auto 👉 `margin: 0 auto;`

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

### 3.2 padding ```html

#p1

#p2

#p3

``` padding 部分和 margin 类似。

px-10 py-5.png

### 3.3 space 将 `space-x-*` 或 `space-y-*` 写在容器上，用来控制子元素之间的间距。 1. 水平方向排列 ```html

``` 1. 垂直方向排列 ```html

```

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

## 4. 边框线宽、线类型、弧度。 ### 4.1 线宽 + 颜色 ```html

``` 通过 `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-[]` 的方式进行： ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.

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

字体大小.png

### 5.2 文本对齐方式 ```tsx

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.

```

文本对其方式.png

### 5.3 字体斜体与加粗 ```tsx

Lorem ipsum! -- italic

Lorem ipsum! -- font-weight: 100;

Lorem ipsum! -- font-weight: 300;

Lorem ipsum! -- font-weight: 400;

Lorem ipsum! -- font-weight: 700;

Lorem ipsum! -- font-weight: 900;

```

斜体与加粗.png

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

Lorem ipsum! -- 文本颜色

Lorem ipsum! -- 边框颜色

Lorem ipsum! -- 背景颜色

Lorem ipsum! -- 背景颜色（75% 透明度）

Lorem ipsum! -- 背景颜色（50% 透明度）

向右渐变（purple-500 👉 pink-500）

向左渐变（sky-500 👈 transparent）

向右渐变（indigo-500 👉 purple-500 👉 pink-500）

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

各种颜色.png

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