Skip to content

Commit

Permalink
docs(en): merge docs/main into docs-cn/main @ eec5e22
Browse files Browse the repository at this point in the history
  • Loading branch information
QC-L authored Oct 5, 2021
2 parents e2dddbc + 736ff8a commit 32c9a5d
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 11 deletions.
3 changes: 2 additions & 1 deletion guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@

在阐述为什么创建 Windi CSS 时,作者曾说:

> 当项目越来越大时(大约几十个组件),使用 Tailwind CSS 最初的编译时间达到了 3s,而热更新时的时间甚至超过了 1s。<br>- [@voorjaar](https://github.com/voorjaar)
> 当项目越来越大时(大约几十个组件),使用 Tailwind CSS 最初的编译时间达到了 3s,而热更新时的时间甚至超过了 1s。
> \- [@voorjaar](https://github.com/voorjaar)
通过扫描 HTML 和 CSS 按需生成工具类(utilities),Windi CSS 致力于在开发中提供 [更快的加载体验][video comparison] 以及更快的 HMR,并且在生产环境下无需对 CSS 进行 Purge(一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术)。

Expand Down
25 changes: 15 additions & 10 deletions integrations/vite.md
Original file line number Diff line number Diff line change
Expand Up @@ -288,26 +288,31 @@ export default {

---

## SvelteKit (从 1.0.0-next.100 开始) {#sveltekit-as-of-1-0-0-next-100}
## SvelteKit (从 1.0.0-next.102 开始) {#sveltekit-as-of-1-0-0-next-102}

通过 `npm i -D vite-plugin-windicss` 安装插件并修改 svelte 配置:

```js svelte.config.js
```diff
import preprocess from 'svelte-preprocess'
import WindiCSS from 'vite-plugin-windicss'
+ import WindiCSS from 'vite-plugin-windicss'

/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),

kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
vite: () => ({
plugins: [
WindiCSS.default(),
],
}),
+ vite: {
+ plugins: [
+ WindiCSS(),
+ ],
+ },
},
}
};

export default config
```

Expand All @@ -322,5 +327,5 @@ export default config
if (browser) import("virtual:windi-devtools")
// ...
</script>
<!-- ...其他的 $layout.svelte 代码 -->
<!-- ...其他的 __layout.svelte 代码 -->
```
9 changes: 9 additions & 0 deletions plugins/official/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,15 @@ export default {
}
```

Now you can use the `prose` utility class (or one of the variants) on the wrapping element to style the HTML elements contained:

```html
<article class="prose">
<h1>Styled heading!</h1>
<blockquote>Very useful for styling markdown content!</blockquote>
</article>
```

## Disabling size modifiers

```js windi.config.js
Expand Down

0 comments on commit 32c9a5d

Please sign in to comment.