Windi CSS Vue CLI

特性

• ⚡️ 它很快 - 比 vue-cli-plugin-tailwind 快 20~100 倍
• 🧩 按需 CSS 实用程序（与 Tailwind CSS v2 兼容）和原生元素样式重置
• 🍃 从 tailwind.config.js 加载配置
• 📄 CSS @apply / @screen 指令转换
• 🎳 支持实用程序组 - 例如bg-gray-200 悬停：（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
    },
  },
}

最后，在您的条目中导入 windi.css

​main.js​

import 'windi.css' 

就是这样！开始在您的应用中使用类实用程序或 CSS 指令，享受速度吧！ ⚡️

迁移

如果您之前使用过 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。

例子

禁用预检

​vue.config.js​

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

注意事项

Scoped Style

具有作用域样式的 ​@media​ 指令只能与 ​css​ ​postcss​ ​scss​ 一起使用，但不能与 ​sass​、​less​ 或 ​stylus​ 一起使用