vue-cli-plugin-tailwind
Tailwind CSS's utility classes are minned by Purgecss, saving hundreds of kBs in production builds. postcss-preset-env polyfills modern CSS standards based on your browserslist configuration.
Install
TailwindCSS v1.0
vue add @ky-is/tailwind
When the plugin is updated, you can upgrade your configuration with:
vue invoke @ky-is/tailwind
TailwindCSS v0.x
See the tailwind-0.x branch.
Usage
Use inline classes, or @apply. For example, in src/components/HelloWorld.vue of the auto-generated cli app:
<style lang="postcss" scoped>
h1 {
@apply text-purple-500 flex;
}
</style>
Applies scoped, browser-prefixed CSS, while PurgeCSS strips all other unused classes, including the thousands generated by Tailwind.
Configuration
postcss.config.js Plugins
-
postcss-preset-env: Defaults to stage 2, as these draft proposals are considered reasonably stable. If you want to enable handy experimental features like nested classes (a { &:hover: {...} }), change tostage: 0. You can safely delete this plugin from the list if you only write old CSS or use another preprocessor. -
@fullhuman/postcss-purgecss: Purgecss removes all CSS classes that it can't find reference to. By default, all Vue and style files in thesrcfolder are included. Adjustcontentarray if you have CSS classes in other files. Add class names to thewhitelistarray you want to manually prevent PurgeCSS from removing if it thinks they're unused.
Whitelisting
Any CSS class that isn't used inside your .html files in public/, or by your .vue components (outside of the <style> block where they're defined) in src/ will be stripped by PurgeCSS by default, because with it doesn't have a way to know that those classes are being used out-of-the-box.
3rd-party CSS
If you're importing CSS from a 3rd-party library, you'll need to add its source files to PurgeCSS's search paths in postcss.config.js via the content array so it knows they're in use, or whitelist the imported classnames so they're never purged. As an example, vue-good-table requires importing its bundled CSS classes. There's two approaches to ensure its classes aren't purged from your production builds:
- Add
'./node_modules/vue-good-table/src/**/*.vue'to thecontentarray (so PurgeCSS sees these classes being used)
Or:
- Add
/^vgt-/to thewhitelistPatternsarray (as this library prefixes its class names with.vgt-*)
Check your production build
The first time you build for production after major changes, it's always a good idea to check the output CSS to ensure PurgeCSS is configured correctly for your project. Look over the CSS files in dist/, or spin up your production build on localhost with a tool like serve:
npm install --global serve
cd yourproject
serve -s dist
Caveats
- Don't reference class names by string concatination, as PurgeCSS cannot find them. Don't:
text-${error ? 'red' : 'green'}-600. Do:error ? 'text-red-600' : 'text-green-600'. - By default, any class you declare that matches
.*-movewill be whitelisted and always included in your output CSS. This is required to support<transition-group>'s generated classnames. You can changewhitelistPatternsinpostcss.config.jsif you don't want this behavior. - Any time you're using TailwindCSS and Vue, be careful not to define a
<transition-group>withname="cursor", as this will generate.cursor-movewhich will inherit TailwindCSS's cursor class. - If you use any custom characters in your css classes beyond
/and:(which are required for TailwindCSS), you need to add them to the default regex pattern/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g.