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: [],
}

Comments

[Muhammet ESER]

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.

[Roark McColgan]

I was getting

TypeError: Invalid PostCSS Plugin found at: plugins[0]

this fixed the issue for me, thank you

[Ariel Mejia]

did you remove something? just to get an idea of the error

[🅖🅡🅔🅖🅞🅡🅨 🅞🅡🅣🅞🅝]

This article is out of date. Tailwind now supports PostCSS 8. Just use the install instructions from their website.

[Ariel Mejia]

At the moment of the article it makes sense, but thanks for your comment thanks for refer to the official website

[Chandra Shekhar .D]

hi.. I'm having this issue

Module not found
./assets/styles/index.css in ./src/main.js

please help..

[Ayoazeez26]

it's supposed to be import "./assets/tailwind.css"
It depends on where you created your css file