title: 配置 Windi CSS

配置 Windi CSS {#configure-windi-css}

Markdown 天然支持 HTML。因此，你可以按照你想要的方式对你的内容进行样式设计。为了提供一些便利，我们内置了 Windi CSS，所以你可以直接使用 Windi CSS 提供的工具类对样式进行调整。

示例：

  1. <div class="grid pt-4 gap-4 grids-cols-[100px,1fr]">
  3. ### Name
  5. - Item 1
  6. - Item 2
  8. </div>

Windi CSS v3.0 中的 属性化（Attributify）模式 已默认启用。

配置 {#configurations}

如需配置 Windi CSS，请根据如下内容创建并配置 setup/windicss.ts，以对内部配置进行扩展：

  1. // setup/windicss.ts
  3. import { defineWindiSetup } from '@slidev/types'
  5. // 对内部 windicss 配置进行扩展
  6. export default defineWindiSetup(() => ({
  7.   shortcuts: {
  8.     // 自定义默认背景
  9.     'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
  10.   },
  11.   theme: {
  12.     extend: {
  13.       // 字体可以被替换，请记得更新 `index.html` 中的字体链接
  14.       fontFamily: {
  15.         sans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
  16.         mono: '"Fira Code", monospace',
  17.       },
  18.     },
  19.   },
  20. }))

欲了解更多，请参阅 Windi CSS 配置。