Integration for Vue CLI #

Features #

• ⚡️ It's FAST - 20~100x times faster than vue-cli-plugin-tailwind
• 🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting
• 🍃 Load configurations from tailwind.config.js
• 📄 CSS @apply / @screen directives transforms
• 🎳 Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)

Install #

Install using Vue CLI. (Vue CLI 4+ is recommended)

vue add windicss

⚠️ This module is a pre-release, please report any issues you find.

Then, add the configuartion

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

And finally, import windi.css in your entry

import 'windi.css'

That's it! Starting using classes utilities or CSS directives in your app, and enjoy the speed! ⚡️

Migrating #

If you were previously using vue-cli-plugin-tailwind, please consult the documentation on migrating.

yarn remove vue-cli-plugin-tailwind

Options #

• Default:

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

• See options.ts for configuration reference.

Examples #

Disable Preflight #

vue.config.js

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

Caveats #

Scoped Style #

@media directive with scoped style can only work with css postcss scss but not sass, less nor stylus