Windi CSS 摘录

Windi CSS 依靠对您的源文件的静态扫描和提取来查找您的实用程序用法并按需生成等效的 CSS。与 Tailwind 的清除限制类似，您需要使用 Windi CSS 实用程序的静态全名才能正确检测到它们。例如，

不能静态提取字符串连接：

<div class="text-${ active ? 'green' : 'orange' }-400"></div>

请改用实用程序的全名：

<div class="${ active ? 'text-green-400' : 'text-orange-400' }"></div>

安全列表

有时你必须使用动态连接：

<div class="p-${size}"></div>

为此，您需要在 windi.config.js 的安全列表选项中指定可能的组合。

​windi.config.js​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  safelist: 'p-1 p-2 p-3 p-4',
})

或者更灵活：

​windi.config.js​

import { defineConfig } from 'windicss/helpers'

function range(size, startAt = 1) {
  return Array.from(Array(size).keys()).map(i => i + startAt)
}

export default defineConfig({
  safelist: [
    range(3).map(i => `p-${i}`), // p-1 to p-3
    range(10).map(i => `mt-${i}`), // mt-1 to mt-10
  ],
})

扫描

当开发服务器/构建过程启动时，Windi CSS 将扫描您的源代码并提取实用程序用法。默认情况下，它将扫描 src/ 下扩展名为 vue、html、mdx、pug、jsx、tsx 的文件。

如果您想启用/禁用对其他文件类型或位置的扫描，您可以使用包含和排除选项对其进行配置：

​windi.config.js​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    // accepts globs and file paths relative to project root
    include: [
      'index.html',
      'src/**/*.{vue,html,jsx,tsx}',
    ],
    exclude: [
      'node_modules/**/*',
      '.git/**/*',
    ],
  },
})

预检

预检（样式重置）也可以通过扫描按需启用。

您可以在配置中完全禁用它：

​windi.config.js​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: false,
})

或者通过安全列表明确启用它：

​windi.config.js​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: {
    safelist: 'h1 h2 h3 p img',
  },
})