docs(cn): guide/index translation (#5)

Co-authored-by: Anthony Fu <[email protected]>

Author: QC-L

guide/index.md

@@ -11,47 +11,47 @@
 [options]: /guide/configuration
 [features]: /features/
 
-# Getting Started
+# 开始 {#getting-started}
 
-**Windi CSS** is a next-generation utility-first CSS framework.
+**Windi CSS** 是下一代工具优先的 CSS 框架。
 
-If you are already familiar with [Tailwind CSS], think about Windi CSS as an **on-demanded** alternative to Tailwind, which provides faster load times, **fully compatible with Tailwind v2.0** and with a bunch of additional cool features.
+如果你已经熟悉了 [Tailwind CSS]，可以把 Windi CSS 看作是**按需供应的** Tailwind 替代方案，它为你提供了更快的加载体验，**完美兼容 Tailwind v2.0**，并且拥有很多额外的酷炫功能。
 
-## Why Windi CSS?
+## 为什么选择 Windi CSS？{#why-windi-css}
 
-A quote from the author should illustrate his motivation to create Windi CSS:
+在阐述为什么创建 Windi CSS 时，作者曾说：
 
-> When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS. - [@voorjaar](https://github.com/voorjaar)
+> 当项目越来越大时（大约几十个组件），使用 Tailwind CSS 最初的编译时间达到了 3s，而热更新时的时间甚至超过了 1s。- [@voorjaar](https://github.com/voorjaar)
 
-By scanning your HTML and CSS and generating utilities on demand, Windi CSS is able to provide [faster load times][video comparison] and a speedy HMR in development and does not require purging in production.
+通过扫描 HTML 和 CSS 按需生成工具类（utilities），Windi CSS 致力于在开发中提供 [更快的加载体验][video comparison] 以及更快的 HMR，并且在生产环境下无需对 CSS 进行 Purge（一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术）。
 
-## Basic Usage
+## 基础用法 {#basic-usage}
 
-All [utilities] of [Tailwind CSS] are supported in Windi CSS without any extra configurations.
+Windi CSS 支持 [Tailwind CSS] 的所有 [工具类][utilities]，无需任何额外配置。
 
-You can use utility classes in your components and stylesheets as usual:
+你可以像平常一样正常编写你的组件，同时在样式表中使用实用类：
 
 ```html
 <div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
   <img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
   <div class="text-center space-y-2 sm:text-left">
     <div class="space-y-0.5">
       <p class="text-lg text-black font-semibold">Erin Lindford</p>
-      <p class="text-gray-500 font-medium">Product Engineer</p>
+      <p class="text-gray-500 font-medium">产品经理</p>
     </div>
     <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">
-      Message
+      消息
     </button>
   </div>
 </div>
 ```
 
-**Only the utilities you use will generate the corresponding CSS.**
+**只有你使用的工具类才会产生相应的 CSS**。
 
-## Integrations
+## 集成 {#integrations}
 
-We provide **first-class integrations** for your favorite tools with the best developer experience on each one of them, see the [integrations guides](/guide/installation) to get started!
+我们为主流工具提供了**最佳的适配**，在每一个工具上都有最好的开发体验，请参阅 [集成指南](/guide/installation)，选择你最喜欢的工具即刻体验！
 
-## Features
+## 特性 {#features}
 
-In addition to Tailwind CSS v2, we also have some great features that only possible for Windi CSS. Refer to the [next chapter][features] for more details.
+除了 Tailwind CSS v2 的已有特性外，我们还提供了只有 Windi CSS 才能实现的优秀特性。欲了解更多，请参考 [下一章节][features]。