Tailwind + Vue.js PostCSS Configuration

Tailwind is “A utility-first CSS framework for rapidly building custom user interfaces”, and it’s not UI kit. So you need to build your own ui based on Tailwind css class.

For example, in bootstrap if we need to style button,

<button class="btn btn-primary">
    Button
</button>

In Tailwind,

<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
    Button
</button>

Hmm, it’s looks bootstrap win in this case. But wait, if you need customize button theme tailwind will win. Or you can see the button example in tailwind documentation site to see more case.

Vue + Tailwind + PurgeCSS

  1. npm install tailwindcss @fullhuman/postcss-purgecss --save-dev
  2. npx tailwind init tailwind.js
  3. mkdir src/assets/css
  4. touch src/assets/css/tailwind.css fill with
@tailwind preflight;
@tailwind components;
@tailwind utilities;
  1. Edit src/main.js and import your tailwindcss
// Tailwind CSS
import '@/assets/css/tailwind.css'

By default, tailwind file size is bigger than bootstrap, you can see the explanation here. So we need PurgeCSS to remove unused css class in our production compiled css.

  1. Edit postcss.config.js
const tailwindcss = require('tailwindcss')

const autoprefixer = require('autoprefixer')

const purgecss = require('@fullhuman/postcss-purgecss')

class TailwindExtractor {
  static extract (content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || []
  }
}

module.exports = {
  plugins: [
    tailwindcss('./tailwind.js'),

    autoprefixer({
      add: true,
      grid: true
    }),

    purgecss({
      content: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.js',
        './public/**/*.html'
      ],
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ['html', 'vue', 'js']
        }
      ]
    })
  ]
}