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

1. 前言

上篇介绍了宽高、边距、边框、文本、颜色等常用基础属性，本篇继续基础内容，包括伪类、伪元素、flex 和 grid 布局、定位。

• 听说你还不会 Tailwind CSS(基础·上篇)
• 听说你还不会 Tailwind CSS(基础·中篇)
• 听说你还不会 Tailwind CSS(基础·下篇)
• 听说你还不会 Tailwind CSS(进阶·上篇)

2. 伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。

2.1 :hover

鼠标悬浮在元素上面时出现的效果。

html <button class="border-2 bg-black text-white hover:bg-white hover:text-black"> button </button>

只要在想要实现 hover 效果的类名前添加 hover: 就可以了，例如上面悬浮时的按钮背景颜色被置为白色(hover:bg-white)、文字颜色置为黑色(hover:text-black)。

2.2 :focus

按钮、输入框等表单控件聚焦时出现的效果。

html <input type="text" class="px-2 outline focus:outline-2 focus:outline-sky-500" placeholder="请聚焦这里..." />

• outline 👉 outline-style: solid;
• focus:outline-2, focus:outline-sky-500 👉

css input:focus { outline: 2px solid #0ea5e9; }

2.3 :active

鼠标按住时就打开了 active 激活状态。

tsx <button class="bg-sky-500 active:bg-pink-500">button</button>

active:bg-pink-500 👉

css button:active { background-color: #EC4899; }

3. 伪元素

伪元素与伪类相似，不过表现得是像是往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。例如：::before、::after 等等。

3.1 ::before, ::after

html <label class="block"> <span class="before:content-['⭐️'] before:mr-2 after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700"> Email </span> <input type="email" name="email" class="mt-1 px-3 py-2 bg-white border placeholder-slate-400 rounded-md" placeholder="请输入你的邮箱..." /> </label>

• block 👉 display: block;
• before:content-['⭐️'], before:mr-2 👉

css span::before { content: '⭐️'; margin-right: 8px; }

• after:content-['*'], after:ml-0.5, after:text-red-500 👉

css span::after { content: '*'; margin-left: 2px; color: #ef4444; }

3.2 placeholder

html <input class="placeholder:italic placeholder:text-yellow-200 text-white bg-neutral-700 border rounded-md py-2 px-3" placeholder="请输入搜索内容..." type="text" name="search" />

• placeholder:italic 👉 设置字体为斜体
• placeholder:text-yellow-200 👉 设置颜色

3.3 file input

html <input type="file" class="block w-full text-sm text-neutral-700 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-cyan-50 file:text-cyan-700 hover:file:bg-cyan-100 " />

• file:mr-4 file:py-2 file:px-4 👉 设置边距
• file:rounded-full file:border-0 👉 设置边框
• file:text-sm file:font-semibold 👉 设置字体
• file:bg-cyan-50 file:text-cyan-700 👉 设置颜色
• hover:file:bg-cyan-100 👉 设置悬浮效果

3.4 selection

```tsx

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni fugit distinctio accusamus? Aliquid minus eaque, nostrum id perferendis autem labore architecto quasi quidem, neque recusandae voluptates quam nisi. Dolor, repellendus.

```

• selection:bg-amber-300 👉 设置选中时的背景颜色
• selection:text-amber-900 👉 设置选中时的字体颜色

4. flex

网页的骨架非常重要，而骨架的设计来源是布局。首先是 flex 布局。

4.1 两栏布局

```html

left

right

```

• flex 👉 display: flex;
• flex-1 👉 flex: 1 1 0%;

4.2 水平垂直方向居中

```html

center

```

• flex 👉 display: flex;
• justify-center 👉 justify-content: center;
• items-center 👉 align-items: center;

4.3 两端对齐导航栏

```tsx

Home

About

Contact

```

• flex 👉 display: flex;
• flex-1 👉 flex: 1 1 0%;
• cursor-pointer 👉 cursor: pointer;

4.4 垂直方向菜单栏

```tsx

• #item1
• #item2
• #item3
• #item4
• #item5
• #item6

```

• flex 👉 display: flex;
• flex-col 👉 flex-direction: column;

5. grid

5.1 两栏布局

```html

left

right

```

• grid 👉 display: grid;
• grid-cols-2 👉 grid-template-columns: repeat(2, minmax(0, 1fr));

5.2 水平垂直方向居中

```html

center

```

• grid 👉 display: grid;
• place-items-center 👉 place-items: center;

5.3 导航栏

```html

Home

About

Contact

```

• grid 👉 display: grid;
• grid-cols-3 👉 grid-template-columns: repeat(3, minmax(0, 1fr));

5.4 图片画廊

```html

```

• grid 👉 display: grid;
• grid-cols-3 👉 grid-template-columns: repeat(3, minmax(0, 1fr));
• gap-4 👉 gap: 1rem; /* 16px */
• object-scale-down: object-fit: scale-down;
• object-contain: object-fit: contain;
• object-cover: object-fit: cover;
• object-fill: object-fit: fill;

6. 定位

默认的定位 position 为 static，另外除了它和 relative 定位都会脱离文档流，也就是像气球那样依次飘起来。

6.1 relative + absolute

```html

父容器

子元素A

子元素B

子元素C

```

• relative 👉 position: relative;
• absolute 👉 position: absolute;
• top-10 👉 top: 2.5rem; /* 40px */
• left-10 👉 left: 2.5rem; /* 40px */

还有另外两个方向：

• bottom-* 👉 bottom: _;
• right-* 👉 right: _;

6.2 z-index

默认情况下，定位元素的 z-index 都是逐级递增的，就像上面那样，C > B > A。想要子元素 B 的 z 坐标最高，只要加上 z-* 即可：

```html

子元素B

```

• z-10 👉 z-index: 10;

6.3 fixed

固定定位，将添加按钮固定在右下方是移动端中的常用功能：

html <button class="fixed bottom-10 right-10 size-10 text-white text-xl bg-purple-500 rounded-full"> + </button>

• fixed 👉 position: fixed;
• bottom-10 👉 bottom: 2.5rem; /* 40px */
• right-10 👉 right: 2.5rem; /* 40px */

6.4 sticky

粘性定位，一般把导航栏贴在顶端：

```html

• navigation
• #item1
• #item2
• #item3
• #item4
• #item5
• #item6
• #item7
• #item8
• #item9
• #item10

```

• overflow-auto 👉 overflow: auto;
• sticky 👉 position: sticky;
• top-0 👉 top: 0;

7. 总结

以上就是基础中篇的内容，下篇将介绍形变、过渡和动画相关内容。