vue-cli-plugin-windicss

Windi CSS for Vue CLI, it's fast! ⚡️
^{a.k.a On-demand Tailwind CSS}

⚡️ See speed comparison with Tailwind

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
• 📄 Use @apply / @screen directives in any file: Vue SFC, Less, SCSS, SASS, PostCSS, Stylus
• 🎳 Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)

Setup

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

vue add windicss

Import

Make sure the import for Windi CSS is within your main.js file, the above should do it for you.

import 'windi.css'

Configuration

You can change the behaviour of the plugin by modifying the options in ./vue.config.js.

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

If you have a tailwind.config.js, please rename it to windi.config.js or windi.config.ts.

See here for configuration details.

Migrating

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

yarn remove vue-cli-plugin-tailwind

Configuration

• Default:

export default {
  scan: {
    dirs: ['src', 'public'],
    exclude: [
      'node_modules',
      '.git',
    ],
    include: []
  },
}

• See options.ts for configuration reference.

Examples

Disable Preflight

vue.config.js

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

Credits

• Windy CSS team

Sponsors

License

MIT License © 2021 Harlan Wilton