Skip to content

Commit

Permalink
docs(cn): guide/index translation (#5)
Browse files Browse the repository at this point in the history
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
  • Loading branch information
QC-L and antfu authored May 26, 2021
1 parent 76c6fd0 commit 955560b
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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]

0 comments on commit 955560b

Please sign in to comment.