DEV Community

Sucipto
Sucipto

Posted on • Updated on

My Vue + TailwindCSS 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>
Enter fullscreen mode Exit fullscreen mode

In Tailwind,

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

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;
Enter fullscreen mode Exit fullscreen mode
  1. Edit src/main.js and import your tailwindcss
// Tailwind CSS
import '@/assets/css/tailwind.css'
Enter fullscreen mode Exit fullscreen mode

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']
        }
      ]
    })
  ]
}
Enter fullscreen mode Exit fullscreen mode

Originaly posted on: My Blog Post

Top comments (0)