Windi CSS Vue CLI

2023-02-16 17:59 更新

特性

  • ?? 它很快 - 比 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)的任何問(wè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' 

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

遷移

如果您之前使用過(guò) 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? 一起使用


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)