Exciting release!Introducing "safe npm". Learn more
Log inDemoInstall


Package Overview
File Explorer

Advanced tools


Write utility-first CSS with future standards in your Vue app using TailwindCSS.


Version published
Weekly downloads
decreased by-12.8%

Weekly downloads




Supports Tailwind v1.0 (follow the migration guide).

Upgrade the plugin's default configuration, then apply your customizations to it:

vue invoke @ky-is/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.


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.


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.


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 to stage: 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 the src folder are included. Adjust content array if you have CSS classes in other files. Add class names to the whitelist array you want to manually prevent PurgeCSS from removing if it thinks they're unused.


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 the content array (so PurgeCSS sees these classes being used)


  • Add /^vgt-/ to the whitelistPatterns array (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


  • 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 .*-move will be whitelisted and always included in your output CSS. This is required to support <transition-group>'s generated classnames. You can change whitelistPatterns in postcss.config.js if you don't want this behavior.
  • Any time you're using TailwindCSS and Vue, be careful not to define a <transition-group> with name="cursor", as this will generate .cursor-move which 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.


Last updated on 14 May 2019

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
support@socket.devSocket SOC 2 Logo


  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc