@ky-is/vue-cli-plugin-tailwind

vue-cli-plugin-tailwind

Tailwind CSS's utility classes are minned by Purgecss to ensure a minimal CSS footprint.

postcss-preset-env enables you to write CSS from upcoming standards, polyfilled based on your browserslist configuration.

postcss-import allows importing Tailwind with the standard @import syntax.

Install

vue add @ky-is/tailwind

When the plugin is updated, you can upgrade your tailwind configuration to take advantages of the latest fixes and improvements with:

vue invoke @ky-is/tailwind

(Requires node 6 or later.)

Usage

In addition to inline classes, shadowLookup is supported to @apply mixins directly in .vue modules. For example, in src/components/HelloWorld.vue of the auto-generated cli app:

<style lang="postcss" scoped>
h1 {
  @apply text-purple flex;
}
</style>

Applies a purple text color with scoped, browser-prefixed CSS, while PurgeCSS strips all other unused colors (and classes) from the Tailwind default configuration.

Configuration

postcss.config.js Plugins

• postcss-preset-env: Configured to stage 2 by default, as these draft proposals are considered reasonably stable. If you want to enable more experimental features like nested classes (a { &hover: {...} }), change to stage: 0.

• @fullhuman/postcss-purgecss: Purgecss removes all CSS classes that it can't find reference to. By default, all Vue and style files in the src folder are included. Adjust content array if you have CSS classes in other files.