vue-cli-plugin-tailwind

vue-cli-plugin-tailwind

A plugin that adds Tailwind CSS and Purgecss 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 or you don't need to change Tailwinds default styles.
• 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 and Purgecss will be added as plugins in your PostCSS config.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    'vue-cli-plugin-tailwind/purgecss': {},
    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 files inside the ./src directory.

let config = {
  content: ['./public/**/*.html', './src/**/*.vue'],
  defaultExtractor: content =>
    content.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [],
};

You can extend/override the default config in your PostCSS configuration.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    'vue-cli-plugin-tailwind/purgecss': {
      whitelist: ['foo', 'bar'],
    },
    autoprefixer: {},
  },
};

Check https://www.purgecss.com/configuration#options for a list of available options.

License

MIT