配置 Windi CSS

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

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

示例:

<div class="grid pt-4 gap-4 grids-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] dark: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 配置