Windi CSS 摘錄

Windi CSS 依靠對您的源文件的靜態(tài)掃描和提取來查找您的實(shí)用程序用法并按需生成等效的 CSS。與 Tailwind 的清除限制類似，您需要使用 Windi CSS 實(shí)用程序的靜態(tài)全名才能正確檢測到它們。例如，

不能靜態(tài)提取字符串連接：

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

請改用實(shí)用程序的全名：

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

安全列表

有時你必須使用動態(tài)連接：

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

為此，您需要在 windi.config.js 的安全列表選項(xiàng)中指定可能的組合。

?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
  ],
})

掃描

當(dāng)開發(fā)服務(wù)器/構(gòu)建過程啟動時，Windi CSS 將掃描您的源代碼并提取實(shí)用程序用法。默認(rèn)情況下，它將掃描 src/ 下擴(kuò)展名為 vue、html、mdx、pug、jsx、tsx 的文件。

如果您想啟用/禁用對其他文件類型或位置的掃描，您可以使用包含和排除選項(xiàng)對其進(jìn)行配置：

?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/**/*',
    ],
  },
})

預(yù)檢

預(yù)檢（樣式重置）也可以通過掃描按需啟用。

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

?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',
  },
})