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

Функции #

• ⚡️ Это БЫСТРО - в 20~100 раз быстрее, чем vue-cli-plugin-tailwind
• 🧩 Утилиты CSS по запросу (совместимые с Tailwind CSS v2) и сброс стиля собственных элементов
• 🍃 Загрузить конфигурации из tailwind.config.js
• 📄 Преобразование директив CSS @apply / @screen
• 🎳 Группы утилит поддержки - например, bg-gray-200 hover:(bg-gray-100 text-red-300)

Настройка #

Установить с помощью Vue CLI. (Рекомендуется Vue CLI 4+)

vue add windicss

⚠️ Этот модуль является предварительным выпуском, пожалуйста, сообщайте о любых проблемах, которые вы обнаружите.

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

Вы можете изменить поведение плагина, изменив параметры в ./vue.config.js.

module.exports = {
  pluginOptions: {
    windicss: {
      // see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
    },
  },
}

Если у вас есть tailwind.config.js, переименуйте его в windi.config.js или windi.config.ts.

Смотрите здесь для получения подробной информации о конфигурации.

Миграция #

Если вы ранее использовали vue-cli-plugin-tailwind, обратитесь к документации по вопросам миграции.

yarn remove vue-cli-plugin-tailwind

Параметры #

• По умолчанию:

export default {
  scan: {
    dirs: ['src'],
    exclude: [
      'node_modules',
      '.git',
      'public/**/*',
      '*.template.html',
      'index.html',
    ],
    include: [],
  },
  transformCSS: 'pre',
}

• Смотрите options.ts для справки по конфигурации.

Примеры #

Отключить предпечатную проверку #

ngridsome.config.js

module.exports = {
  // ...
  pluginOptions: {
    windicss: {
      preflight: false,
    },
  },
}

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

Стили Scoped #

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