DEV Community

Sucipto
Sucipto

Posted on • Edited on

5 1

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more