特性

• ?? 它很快 - 比 vue-cli-plugin-tailwind 快 20~100 倍
• ?? 按需 CSS 實(shí)用程序（與 Tailwind CSS v2 兼容）和原生元素樣式重置
• ?? 從 tailwind.config.js 加載配置
• ?? CSS @apply / @screen 指令轉(zhuǎn)換
• ?? 支持實(shí)用程序組 - 例如bg-gray-200 懸停：（bg-gray-100 text-red-300）

安裝

使用 Vue CLI 安裝。 （推薦使用 Vue CLI 4+）

vue add windicss

?? 此模塊是預(yù)發(fā)布版，請(qǐng)報(bào)告您發(fā)現(xiàn)的任何問題。

然后，添加配置

?vue.config.js?

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

最后，在您的條目中導(dǎo)入 windi.css

?main.js?

import 'windi.css' 

就是這樣！開始在您的應(yīng)用中使用類實(shí)用程序或 CSS 指令，享受速度吧！ ??

遷移

如果您之前使用過 vue-cli-plugin-tailwind，請(qǐng)參閱有關(guān)遷移的文檔。

yarn remove vue-cli-plugin-tailwind

選項(xiàng)

• 默認(rèn):

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

• 有關(guān)配置參考，請(qǐng)參閱 options.ts。

例子

禁用預(yù)檢

?vue.config.js?

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

注意事項(xiàng)

Scoped Style

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