diff --git a/utilities/variants.md b/utilities/variants.md
index 66e33319..8ff44b1d 100644
--- a/utilities/variants.md
+++ b/utilities/variants.md
@@ -1,53 +1,52 @@
-[pseudo-selector]: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
+[pseudo-selector]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
 
-# Variants
+# 可变修饰 {#variants}
 
-Variants allow you to specify under what circumstances your utilities will be activated.
+可变修饰允许你在特定情况下启用你的工具类。
 
-You may use the screen size, system theme, or any [pseudo-selector], such as `:hover`.
+你可以使用屏幕大小，系统主题，或者任何伪选择器，比如 `:hover`。
 
-You specify a variant by using the `:` separator, and you can combine them arbitrarily as in:
+你可以使用 `:` 操作符指定一个可变修饰，也可以将它们任意组合起来，如下：
 
 ```
 sm:bg-red-500 sm:hover:bg-green-300 dark:bg-white
 ```
 
-## Screen Variants
+## 屏幕可变修饰 {#screen-variants}
 
-### Mobile First
+### 移动设备优先 {#mobile-first}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| sm | @media (min-width: 640px) { ... } | Enable utility when the screen width is greater than 640px |
-| md | @media (min-width: 768px) { ... } | Enable utility when the screen width is greater than 768px |
-| lg | @media (min-width: 1024px) { ... } | Enable utility when the screen width is greater than 1024px |
-| xl | @media (min-width: 1280px) { ... } | Enable utility when the screen width is greater than 1280px |
-| 2xl | @media (min-width: 1536px) { ... } | Enable utility when the screen width is greater than 1536px |
+| sm | @media (min-width: 640px) { ... } | 屏幕宽度不小于 640px 时启用工具 |
+| md | @media (min-width: 768px) { ... } | 屏幕宽度不小于 768px 时启用工具 |
+| lg | @media (min-width: 1024px) { ... } | 屏幕宽度不小于 1024px 时启用工具 |
+| xl | @media (min-width: 1280px) { ... } | 屏幕宽度不小于 1280px 时启用工具 |
+| 2xl | @media (min-width: 1536px) { ... } | 屏幕宽度不小于 1536px 时启用工具 |
 
-### Desktop First
+### 桌面设备优先 {#desktop-first}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| <sm | @media (max-width: 640px) { ... } | Enable utility when the screen width is less than 640px |
-| <md | @media (max-width: 768px) { ... } | Enable utility when the screen width is less than 768px |
-| <lg | @media (max-width: 1024px) { ... } | Enable utility when the screen width is less than 1024px |
-| <xl | @media (max-width: 1280px) { ... } | Enable utility when the screen width is less than 1280px |
-| <2xl  | @media (max-width: 1536px) { ... } | Enable utility when the screen width is less than 1536px |
+| <sm | @media (max-width: 640px) { ... } | 屏幕宽度不大于 640px 时启用工具 |
+| <md | @media (max-width: 768px) { ... } | 屏幕宽度不大于 768px 时启用工具 |
+| <lg | @media (max-width: 1024px) { ... } | 屏幕宽度不大于 1024px 时启用工具 |
+| <xl | @media (max-width: 1280px) { ... } | 屏幕宽度不大于 1280px 时启用工具  |
+| <2xl  | @media (max-width: 1536px) { ... } | 屏幕宽度不大于 1536px 时启用工具 |
 
-### Only Screen
+### 屏幕适用 {#only-screen}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| @sm | @media (min-width: 640px) and (max-width: 768px) { ... } | Enable utility when the screen width is greater than 640px and less than 768px |
-| @md | @media (min-width: 768px) and (max-width: 1024px) { ... } | Enable utility when the screen width is greater than 768px and less than 1024px |
-| @lg | @media (min-width: 1024px) and (max-width: 1280px) { ... } | Enable utility when the screen width is greater than 1024px and less than 1280px |
-| @xl | @media (min-width: 1280px) and (max-width: 1536px) { ... } | Enable utility when the screen width is greater than 1280px and less than 1536px |
-| @2xl | @media (min-width: 1536px) { ... } | Enable utility when the screen width is greater than 1536px |
+| @sm | @media (min-width: 640px) and (max-width: 768px) { ... } | 屏幕宽度大于 640px 并且小于 768px 时启用工具 |
+| @md | @media (min-width: 768px) and (max-width: 1024px) { ... } | 屏幕宽度大于 768px 并且小于 1024px 时启用工具 |
+| @lg | @media (min-width: 1024px) and (max-width: 1280px) { ... } | 屏幕宽度大于 1024px 并且小于 1280px 时启用工具 |
+| @xl | @media (min-width: 1280px) and (max-width: 1536px) { ... } | 屏幕宽度大于 1280px 并且小于 1536px 时启用工具 |
+| @2xl | @media (min-width: 1536px) { ... } | 屏幕宽度不小于 1536px 时启用工具 |
 
-### Max-Width Breakpoints
+### 最大宽度断点 {#max-width-breakpoints}
 
-You can define custom breakpoints that use `max-width` instead, or ranges, by
-using the following configuration options:
+你可以使用 `max-width` 或者范围来自定义断点，配置项如下：
 
 ```ts
 export default {
@@ -60,9 +59,9 @@ export default {
 }
 ```
 
-### Raw Media Queries
+### 原生媒体查询 {#raw-media-queries}
 
-You can define a custom screen by providing a raw media query in the config:
+你可以在配置文件中通过提供的原生媒体查询来自定义屏幕：
 
 ```ts
 export default {
@@ -75,111 +74,111 @@ export default {
 }
 ```
 
-For example, you could then use `print:hidden` to hide elements when styling for print.
+比如，你可以使用 `print:hidden` 来隐藏要打印的元素。
 
-## State Variants
+## 状态可变修饰 {#state-variants}
 
-### Pseudo Classes
+### 伪类 {#pseudo-classes}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| first | `.${utility}:first { ... }` | Targets the first-child pseudo-class. |
-| last | `.${utility}:last { ... }` | Targets the last-child pseudo-class. |
-| odd | `.${utility}:odd { ... }` | Targets the odd-child pseudo-class. |
-| even | `.${utility}:even { ... }` | Targets the even-child pseudo-class. |
-| visited | `.${utility}:visited { ... }` | Targets the visited pseudo-class. |
-| checked | `.${utility}:checked { ... }` | Targets the checked pseudo-class. |
-| focus-within | `.${utility}:focus-within { ... }` | Targets the focus-within pseudo-class. |
-| hover | `.${utility}:hover { ... }` | Targets the hover pseudo-class. |
-| focus | `.${utility}:focus { ... }` | Targets the focus pseudo-class. |
-| focus-visible | `.${utility}:focus-visible { ... }` | Targets the focus-visible pseudo-class. |
-| active | `.${utility}:active { ... }` | Targets the active pseudo-class. |
-| link | `.${utility}:link { ... }` | Targets the link pseudo-class. |
-| target | `.${utility}:target { ... }` | Targets the target pseudo-class. |
-| not-checked | `.${utility}:not(:checked) { ... }` | Targets the :not(:checked) pseudo-class. |
-| default | `.${utility}:default { ... }` | Targets the default pseudo-class. |
-| enabled | `.${utility}:enabled { ... }` | Targets the enabled pseudo-class. |
-| indeterminate | `.${utility}:indeterminate { ... }` | Targets the indeterminate pseudo-class. |
-| invalid | `.${utility}:invalid { ... }` | Targets the invalid pseudo-class. |
-| valid | `.${utility}:valid { ... }` | Targets the valid pseudo-class. |
-| optional | `.${utility}:optional { ... }` | Targets the optional pseudo-class. |
-| required | `.${utility}:required { ... }` | Targets the required pseudo-class. |
-| placeholder-shown | `.${utility}:placeholder-shown { ... }` | Targets the placeholder-shown pseudo-class. |
-| read-only | `.${utility}:read-only { ... }` | Targets the read-only pseudo-class. |
-| read-write | `.${utility}:read-write { ... }` | Targets the read-write pseudo-class. |
-| not-disabled | `.${utility}:not(:disabled) { ... }` | Targets the :not(:disabled) pseudo-class. |
-| first-of-type | `.${utility}:first-of-type { ... }` | Targets the first-of-type pseudo-class. |
-| not-first-of-type | `.${utility}:not(:first-of-type) { ... }` | Targets the :not(:first-of-type) pseudo-class. |
-| last-of-type | `.${utility}:last-of-type { ... }` | Targets the last-of-type pseudo-class. |
-| not-last-of-type | `.${utility}:not(:last-of-type) { ... }` | Targets the :not(:last-of-type) pseudo-class. |
-| not-first | `.${utility}:not(:first-child) { ... }` | Targets the not(:first-child) pseudo-class. |
-| not-last | `.${utility}:not(:last-child) { ... }` | Targets the not(:last-child) pseudo-class. |
-| only-child | `.${utility}:only-child { ... }` | Targets the only-child pseudo-class. |
-| not-only-child | `.${utility}:not(:only-child) { ... }` | Targets the not(:only-child) pseudo-class. |
-| only-of-type | `.${utility}:only-of-type { ... }` | Targets the only-of-type pseudo-class. |
-| not-only-of-type | `.${utility}:not(:only-of-type) { ... }` | Targets the not(:only-of-type) pseudo-class. |
-| even-of-type | `.${utility}:nth-of-type(even) { ... }` | Targets the nth-of-type(even) pseudo-class. |
-| odd-of-type | `.${utility}:nth-of-type(odd) { ... }` | Targets the nth-of-type(odd) pseudo-class. |
-| root | `.${utility}:root { ... }` | Targets the root pseudo-class. |
-| empty | `.${utility}:empty { ... }` | Targets the empty pseudo-class. |
-
-### Pseudo Elements
-
-| Variant | Rule | Description |
+| first | `.${utility}:first { ... }` | 第一个伪元素的目标元素。|
+| last | `.${utility}:last { ... }` | 最后一个伪元素的目标元素。|
+| odd | `.${utility}:odd { ... }` | 奇数伪元素的目标元素。|
+| even | `.${utility}:even { ... }` | 偶数伪元素的目标元素。|
+| visited | `.${utility}:visited { ... }` | 已访问伪元素的目标元素。|
+| checked | `.${utility}:checked { ... }` | 已选中伪元素的目标元素。|
+| focus-within | `.${utility}:focus-within { ... }` | 焦点伪元素的目标元素。|
+| hover | `.${utility}:hover { ... }` | 悬停伪元素的目标元素。|
+| focus | `.${utility}:focus { ... }` | 焦点伪元素的目标元素。|
+| focus-visible | `.${utility}:focus-visible { ... }` | 焦点可见伪元素的目标元素。|
+| active | `.${utility}:active { ... }` | 可激活伪元素的目标元素。|
+| link | `.${utility}:link { ... }` | 可链接伪元素的目标元素。|
+| target | `.${utility}:target { ... }` | 伪元素的目标元素。|
+| not-checked | `.${utility}:not(:checked) { ... }` | 未选中伪元素的目标元素。|
+| default | `.${utility}:default { ... }` | 默认伪元素的目标元素。|
+| enabled | `.${utility}:enabled { ... }` | 启用伪元素的目标元素。|
+| indeterminate | `.${utility}:indeterminate { ... }` | 模糊伪元素的目标元素。|
+| invalid | `.${utility}:invalid { ... }` | 无效伪元素的目标元素。|
+| valid | `.${utility}:valid { ... }` | 有效伪元素的目标元素。|
+| optional | `.${utility}:optional { ... }` | 可选伪元素的目标元素。|
+| required | `.${utility}:required { ... }` | 必填伪元素的目标元素。|
+| placeholder-shown | `.${utility}:placeholder-shown { ... }` | 占位符伪元素的目标元素。|
+| read-only | `.${utility}:read-only { ... }` | 只读伪元素的目标元素。|
+| read-write | `.${utility}:read-write { ... }` | 读写伪元素的目标元素。|
+| not-disabled | `.${utility}:not(:disabled) { ... }` | 不禁用伪元素的目标元素。|
+| first-of-type | `.${utility}:first-of-type { ... }` | 特定类型的第一个子伪元素的目标元素。|
+| not-first-of-type | `.${utility}:not(:first-of-type) { ... }` |  特定类型的非第一个子伪元素的目标元素。|
+| last-of-type | `.${utility}:last-of-type { ... }` | 特定类型的最后一个子伪元素的目标元素。|
+| not-last-of-type | `.${utility}:not(:last-of-type) { ... }` | 特定类型的非最后一个子伪元素的目标元素。|
+| not-first | `.${utility}:not(:first-child) { ... }` | 非第一个伪子元素的目标元素。|
+| not-last | `.${utility}:not(:last-child) { ... }` | 非最后一个伪元素的目标元素。|
+| only-child | `.${utility}:only-child { ... }` | 只有伪子元素的目标元素。|
+| not-only-child | `.${utility}:not(:only-child) { ... }` | 不只有伪子元素的目标元素。|
+| only-of-type | `.${utility}:only-of-type { ... }` | 只有特定类型的伪元素的目标元素。|
+| not-only-of-type | `.${utility}:not(:only-of-type) { ... }` | 只有非特定类型的伪元素的目标元素。|
+| even-of-type | `.${utility}:nth-of-type(even) { ... }` | 特定类型的奇数伪元素的目标元素。|
+| odd-of-type | `.${utility}:nth-of-type(odd) { ... }` | 特定类型的偶数伪元素的目标元素。|
+| root | `.${utility}:root { ... }` | 根伪元素的目标元素。|
+| empty | `.${utility}:empty { ... }` | 空伪元素的目标元素。|
+
+### 伪元素 {#pseudo-elements}
+
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| before | `.{utility}::before { ... }` | Targets the before pseudo-element. |
-| after | `.{utility}::after { ... }` | Targets the after pseudo-element. |
-| first-letter | `.{utility}::first-letter { ... }` | Targets the first-letter pseudo-element. |
-| first-line | `.{utility}::first-line { ... }` | Targets the first-line pseudo-element. |
-| selection | `.{utility}::selection { ... }` | Targets the selection pseudo-element. |
+| before | `.{utility}::before { ... }` | before 伪元素的目标元素。|
+| after | `.{utility}::after { ... }` | after 伪元素的目标元素。|
+| first-letter | `.{utility}::first-letter { ... }` | 首字母伪元素的目标元素。|
+| first-line | `.{utility}::first-line { ... }` | 首行伪元素的目标元素。 |
+| selection | `.{utility}::selection { ... }` | 选择伪元素的目标元素。 |
 
-### Parent Selectors
+### 父选择器 {#pseudo-selectors}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| group-hover | `.group:hover .${utility} { ... }` | Targets an element when a marked parent matches the hover pseudo-class. |
-| group-focus | `.group:focus .${utility} { ... }` | Targets an element when a marked parent matches the focus pseudo-class. |
-| group-active | `.group:active .${utility} { ... }` | Targets an element when a marked parent matches the active pseudo-class. |
-| group-visited | `.group:visited .${utility} { ... }` | Targets an element when a marked parent matches the visited pseudo-class. |
+| group-hover | `.group:hover .${utility} { ... }` | 当标记的父类与悬停伪类匹配时的目标元素。|
+| group-focus | `.group:focus .${utility} { ... }` | 当标记的父类与焦点伪类匹配时的目标元素。 |
+| group-active | `.group:active .${utility} { ... }` | 当标记的父类与激活伪类匹配时的目标元素。|
+| group-visited | `.group:visited .${utility} { ... }` | 当标记的父类与已访问伪类匹配时的目标元素。 |
 
 
-### Child Selectors
+### 子选择器 {#pseudo-selectors}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| svg | `.${utility} svg { ... }` | Targets svg nodes. |
-| all | `.${utility} * { ... }` | Targets all nodes. |
-| children | `.${utility} > * { ... }` | Targets children nodes. |
-| siblings | `.${utility} ~ * { ... }` | Targets siblings nodes . |
-| sibling | `.${utility} + * { ... }` | Targets first sibling node. |
+| svg | `.${utility} svg { ... }` | svg 目标节点。 |
+| all | `.${utility} * { ... }` | 所有目标节点。 |
+| children | `.${utility} > * { ... }` | 目标子节点。 |
+| siblings | `.${utility} ~ * { ... }` | 目标兄弟节点。 |
+| sibling | `.${utility} + * { ... }` | 目标首个兄弟节点。 |
 
 
-### Media Query
+### 媒体查询 {#media-query}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| motion-safe | `@media (prefers-reduced-motion: no-preference) { ... }` | Targets the prefers-reduced-motion: no-preference media query.
-| motion-reduce | `@media (prefers-reduced-motion: reduce) { ... }` | Targets the prefers-reduced-motion: reduce media query.
+| motion-safe | `@media (prefers-reduced-motion: no-preference) { ... }` | 基于 prefers-reduced-motion: no-preference 的媒体查询目标。 |
+| motion-reduce | `@media (prefers-reduced-motion: reduce) { ... }` | 基于 prefers-reduced-motion: reduce 的媒体查询目标。|
 
-## Theme Variants
+## 主题可变修饰 {#pseudo-selectors}
 
-### Default
+### 默认值 {#default}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| dark | `@media (prefers-color-scheme: dark) { ... }` or `.dark .{utility} { ... }` | Enable utility base on user configuration |
-| light | `@media (prefers-color-scheme: light) { ... }` or `.light .{utility} { ... }` | Enable utility base on user configuration |
+| dark | `@media (prefers-color-scheme: dark) { ... }` or `.dark .{utility} { ... }` | 用户自定义配置以启用工具 |
+| light | `@media (prefers-color-scheme: light) { ... }` or `.light .{utility} { ... }` | 用户自定义配置以启用工具 |
 
-### Following System
+### 跟随系统 {#following-system}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| @dark | `@media (prefers-color-scheme: dark) { ... }` | Enable utility when the system turns on dark mode |
-| @light | `@media (prefers-color-scheme: light) { ... }` | Enable utility when the system turns on light mode |
+| @dark | `@media (prefers-color-scheme: dark) { ... }` | 打开亮色模式启用工具 |
+| @light | `@media (prefers-color-scheme: light) { ... }` | 打开暗色模式启用工具 |
 
-### Following Application
+### 跟随应用程序 {#following-application}
 
-| Variant | Rule | Description |
+| 可变修饰 | 规则 | 描述 |
 | :------ | :--- | :---------- |
-| .dark | `.dark .{utility} { ... }` | Enable utility base on application dark mode |
-| .light | `.light .{utility} { ... }` | Enable utility base on application light mode |
+| .dark | `.dark .{utility} { ... }` | 基于亮色模式下启用工具 |
+| .light | `.light .{utility} { ... }` | 基于暗色模式下启用工具 |