Updated for Tailwind v1.7.4+

Adding Tailwind to your Vue app is easy. No need to use an intermediate Vue library for it, especially since PurgeCSS is now baked in Tailwind!

Instructions

• Install Tailwind: npm install tailwindcss
• Create a CSS file (e.g. assets/css/tailwind.css) with the content below and import it in main.js (e.g. import '@/assets/css/tailwind.css').

@tailwind base;
@tailwind components;
@tailwind utilities;

Note: don't write these lines directly in App.vue, as this would increase the recompile time during development.

• Generate the Tailwind & PostCSS config files: npx tailwindcss init -p

Note: if you already have an existing postcss.config.js, add the following content.

• Configure PurgeCSS in tailwind.config.js:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
  purge: [
      './public/**/*.html',
      './src/**/*.vue'
    ]
  }
}

Note: PurgeCSS is enabled automatically in production.

Whitelisting CSS

In tailwind.config.js , you can whitelist selectors to stop PurgeCSS from removing dynamically added classes from your CSS. For example, here is how to whitelist classes autogenerated by Vue:

purge: {
    content: ['./public/**/*.html', './src/**/*.vue'],
    options: {
      whitelistPatterns: [ 
    /-(leave|enter|appear)(|-(to|from|active))$/, 
    /^(?!(|.*?:)cursor-move).+-move$/,
        /^router-link(|-exact)-active$/
      ],
    },
 }