Извлечения #

Windi CSS полагается на статическое сканирование и извлечение ваших исходных файлов, чтобы найти ваши служебные программы и сгенерировать эквивалентный CSS по запросу. Подобно Tailwind's Purge limitation, вам нужно будет использовать статические полные имена утилит для 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>

Для этого вам нужно указать возможные комбинации в опции safelist файла windi.config.js.

import { defineConfig } from 'windicss/helpers'

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

Или, чтобы быть более гибким:

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

Сканирование #

Когда запускается процесс dev-server/build, Windi CSS просканирует ваш исходный код и извлечет данные об использовании служебных программ. По умолчанию он будет сканировать файлы в каталоге src/ с расширениями vue, html, mdx, pug, jsx, tsx.

Если вы хотите включить/отключить сканирование для других типов файлов или мест, вы можете настроить его с помощью параметров include и exclude:

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

Предпечатный #

Предпечатная проверка (сброс стиля) также включается по запросу при сканировании.

Вы можете полностью отключить его в конфигурации:

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: false,
})

Или явно включите его с помощью списка надежных отправителей:

import { defineConfig } from 'windicss/helpers'

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