Интеграция для Vite

Функции

⚡️ Это БЫСТРО - в 20~100 раз быстрее, чем Tailwind на Vite
🧩 Утилиты CSS по запросу (полностью совместимы с Tailwind CSS v2)
📦 Сброс стиля собственных элементов по требованию (предпечатная проверка)
🔥 Замена горячего модуля (HMR)
🍃 Загрузить конфигурации из tailwind.config.js
🤝 Независимость от фреймворка - Vue, React, Svelte и vanilla!
📄 Преобразование директив CSS @apply / @screen (также работает для Vue SFC <style>)
🎳 Поддержка групп вариантов - например, bg-gray-200 hover:(bg-gray-100 text-red-300)
😎 "Дизайн в инструментах разработки" - если вы работаете таким образом в традиционном Tailwind, то нет причин, по которым мы не можем!

Посмотрите сравнение скорости между Windi CSS и Tailwind CSS на Vite.

Установка

Установите пакет:

npm i -D vite-plugin-windicss windicss

Затем установите плагин в свою конфигурацию Vite:

vite.config.js

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

И, наконец, импортируйте virtual:windi.css в свои записи Vite:

main.js

import 'virtual:windi.css'

Вот и все! Начните использовать классы утилит или директивы CSS в своем приложении и наслаждайтесь скоростью! ⚡️

Если вы переходите с Tailwind CSS, также ознакомьтесь с разделом Миграции

Поддержка

TypeScript

Включить TypeScript для вашего tailwind.config.js? Конечно, а почему бы и нет?

Переименуйте его в tailwind.config.ts, и все заработает!

tailwind.config.ts

import { defineConfig } from 'windicss/helpers'
import formsPlugin from 'windicss/plugin/forms'

export default defineConfig({
  darkMode: 'class',
  safelist: 'p-3 p-4 p-5',
  theme: {
    extend: {
      colors: {
        teal: {
          100: '#096',
        },
      },
    },
  },
  plugins: [formsPlugin],
})

Поддержка Pug

Он автоматически включит поддержку Pug для .pug и Vue SFC, когда в рабочей области будет обнаружена зависимость pug.

"Дизайн в DevTools"

Это может быть обычной практикой, когда вы используете Tailwind на основе очистки, когда у вас есть все классы в вашем браузере, и вы можете попробовать, как все работает, напрямую изменив классы в DevTools. Хотя вы можете подумать, что это своего рода ограничение «по требованию», когда DevTools не знает тех, которые вы еще не использовали в своем исходном коде.

Но, к сожалению, мы здесь, чтобы ОБНОВИТЬ ограничение 😎 Смотрите видео демо.

Просто добавьте следующую строку в свою основную запись

import 'virtual:windi-devtools'

Он будет включен автоматически для вас, получайте удовольствие!

О, и не беспокойтесь о финальном пакете, в производственной сборке virtual:windi-devtools будет пустым модулем, и вам не нужно ничего с этим делать 😃

⚠️ Пожалуйста, используйте его с осторожностью, под капотом мы используем MutationObserver для обнаружения изменений класса. Это означает, что не только внесенные вами вручную изменения, но и изменения, внесенные вашими скриптами, будут обнаружены и включены в таблицу стилей. Это могло вызвать некоторую несогласованность между разработкой и производственной сборкой при использовании динамически создаваемых классов (ложное срабатывание). Мы рекомендуем добавить ваши динамические части в safelist или настроить регрессионные тесты пользовательского интерфейса для вашей производственной сборки, если это возможно.

Конфигурация

Предпечатная проверка (сброс стиля)

Предпечатная проверка включается по запросу. Если вы хотите полностью отключить его, вы можете настроить его, как показано ниже

windi.config.ts

import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({
  preflight: false,
})

Безопасный список (Safelist)

По умолчанию мы сканируем ваш исходный код статически и находим все случаи использования утилит, а затем сгенерировали соответствующий CSS по запросу. Однако существует некоторое ограничение, заключающееся в том, что утилиты, которые решили во время выполнения, не могут быть эффективно сопоставлены, например

<!-- will not be detected -->
<div className={`p-${size}`}>

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

windi.config.ts

import { defineConfig } from 'vite-plugin-windicss'

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

Или вы можете сделать это так

windi.config.ts

import { defineConfig } from 'vite-plugin-windicss'

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

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

При запуске сервера vite-plugin-windicss просканирует ваш исходный код и извлечет данные об использовании утилиты. По умолчанию будут включены только файлы из каталога src/ с расширениями vue, html, mdx, pug, jsx, tsx. Если вы хотите включить сканирование для других типов файлов, вы можете настроить это с помощью:

windi.config.js

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['src/**/*.{vue,html,jsx,tsx}'],
    exclude: ['node_modules', '.git'],
  },
})

Или в параметрах плагина:

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    WindiCSS({
      scan: {
        dirs: ['.'], // all files in the cwd
        fileExtensions: ['vue', 'js', 'ts'], // also enabled scanning for js/ts
      },
    }),
  ],
})

Режим атрибуции

Включите

windi.config.ts

export default {
  attributify: true,
}

И используйте их как хотите:

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Кнопка
</button>

Префикс

Если вас беспокоит конфликт имен, вы можете добавить собственный префикс в режим атрибуции:

windi.config.ts

export default {
  attributify: {
    prefix: 'w:',
  },
}

<button 
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  w:text="sm white"
  w:font="mono light"
  w:p="y-2 x-4"
  w:border="2 rounded blue-200"
>
  Кнопка
</button>

Конфигурация псевдонима

windi.config.ts

export default {
  alias: {
    'hstack': 'flex items-center',
    'vstack': 'flex flex-col',
    'icon': 'w-6 h-6 fill-current',
    'app': 'text-red',
    'app-border': 'border-gray-200 dark:border-dark-300',
  },
}

Порядок макетов

Поддерживается от v0.14.x

По умолчанию при импорте virtual:windi.css будут импортированы все три слоя в следующем порядке: base - components - utilities. Если вы хотите лучше контролировать заказы, вы можете разделить их по:

- import 'virtual:windi.css'
+ import 'virtual:windi-base.css'
+ import 'virtual:windi-components.css'
+ import 'virtual:windi-utilities.css'

Вы также можете сделать так, чтобы ваш собственный CSS мог быть переопределен определенными макетами:

  import 'virtual:windi-base.css'
  import 'virtual:windi-components.css'
+ import './my-style.css'
  import 'virtual:windi-utilities.css'

Еще

Смотрите options.ts для получения дополнительных сведений о конфигурации.

Предостережения

Scoped стиль

Вам нужно будет установить transformCSS: 'pre', чтобы получить работу Scoped Style.

Директива @media со стилем scoped работает только с css postcss scss но не sass, less или stylus

Пример

Смотрите примеры для проектов react, vue и vue с pug sample projects, or Vitesse

SvelteKit (по состоянию на 1.0.0-next.102)

Установите плагин с помощью npm i -D vite-plugin-windicss и настройте конфигурацию svelte:

import preprocess from 'svelte-preprocess'
+ import WindiCSS from 'vite-plugin-windicss'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
+   vite: {
+     plugins: [
+       WindiCSS(),
+     ],
+   },
  },
};

export default config

Добавьте import "virtual:windi.css" в начало вашего файла __layout.svelte:

__layout.svelte

<script>
  import "virtual:windi.css"

  // if you want to enable windi devtools
  import { browser } from "$app/env";
  if (browser) import("virtual:windi-devtools")
  // ...
</script>
<!-- ...rest of __layout.svelte -->

Интеграция для Vite #

Функции #

Установка #

Поддержка #

TypeScript #

Поддержка Pug #

"Дизайн в DevTools" #

Конфигурация #

Предпечатная проверка (сброс стиля) #

Безопасный список (Safelist) #

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

Режим атрибуции #

Префикс #

Конфигурация псевдонима #

Порядок макетов #

Еще #

Предостережения #

Scoped стиль #

Пример #

SvelteKit (по состоянию на 1.0.0-next.102) #

Интеграция для Vite

Функции

Установка

Поддержка

TypeScript

Поддержка Pug

"Дизайн в DevTools"

Конфигурация

Предпечатная проверка (сброс стиля)

Безопасный список (Safelist)

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

Режим атрибуции

Префикс

Конфигурация псевдонима

Порядок макетов

Еще

Предостережения

Scoped стиль

Пример

SvelteKit (по состоянию на 1.0.0-next.102)