vue-cli-plugin-tailwind

A plugin that adds Tailwind CSS to your vue-cli project.

Getting started

Inside your vue-cli project folder add the plugin via:

vue add tailwind

Choose what Tailwind config you want to generate:

• none - Won't create a config file. Useful if you already have a config (make sure to configure PurgeCSS).
• minimal (default) - Will create a minimal tailwind.config.js file where you can define your customizations.
• full - Will generate a tailwind.config.js file containing the entire default configuration.

See Tailwinds configuration guide for more info.

PostCSS Configuration

Tailwind CSS will be added as plugins in your PostCSS config.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Custom Tailwind config file name

If you use a name other than tailwind.config.js for the Tailwind config file, you will need to specify it in your PostCSS configuration.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: 'custom-name.js',
    //...
  },
};

Configure PurgeCSS

By default PurgeCSS will look for css selectors in your .html files inside the ./public directory and .vue, .js, .ts, .jsx, .tsx files inside the ./src directory.

purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

Check https://tailwindcss.com/docs/optimizing-for-production for more info.

License

MIT