Logo Windi CSS

Vue CLI 集成

特性

  • ⚡️ 极速 —— 比 vue-cli-plugin-tailwind 快 20~100 倍
  • 🧩 按需使用的 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: {
      // 具体配置请查看 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',
}

示例

禁用预检样式

ngridsome.config.js

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

注意事项

Scoped Style

带有 scoped style 的 @media 指令 只在 css postcss scss 中有效 ，而在 sass less stylus 中无效。