Use Tailwind 2 with Vue CLI

TailwindCSS have official guides for:

Laravel.
Vue with Vite.
Next.JS
Nuxt.JS
Create react app
Gatsby

But, there is no official guide to work with VueCLI & Vue with TailwindCSS, so here a little guide to install TailwindCSS 2:

Install tailwind

if you have already installed a postcss 8 (not supported) version you would require to uninstall it:

npm uninstall tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create a `postcss.config.js` file

// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

Add tailwind styles in assets directory, `assets/tailwind.css`

// src/assets/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Add styles on the application

On main.js file import the styles:

import './assets/styles/index.css';

Purge files for production

On tailwind.config.js file

module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Top comments (7)

Muhammet ESER • Sep 24 '21 • Edited

If you have any error like that
TypeError: Invalid PostCSS Plugin found at ...

Update your vue-cli to version 5 create new vue project then follow the tailwind docs. Because version 4 using couple of old dependencies like postcss-loader.