配置 Windi CSS

环境： node

此配置仅在 Node.js 环境下运行。你可以访问 Node.js 的相关 API 了解更多。

WARNING

自从 v0.47.0，我们不再支持 Windi CSS。请迁移到 UnoCSS。

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

示例：

<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">

### Name

- Item 1
- Item 2

</div>

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

配置

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

// setup/windicss.ts

import { defineWindiSetup } from '@slidev/types'

// 对内部 windicss 配置进行扩展
export default defineWindiSetup(() => ({
  shortcuts: {
    // 自定义默认背景
    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
  },
  theme: {
    extend: {
      // 字体可以被替换，请记得更新 `index.html` 中的字体链接
      fontFamily: {
        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"',
        mono: '"Fira Code", monospace',
      },
    },
  },
}))

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