DEV Community

Ariel Mejia
Ariel Mejia

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Enter fullscreen mode Exit fullscreen mode

Create a postcss.config.js file

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

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};
Enter fullscreen mode Exit fullscreen mode

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

// src/assets/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Add styles on the application

On main.js file import the styles:

import './assets/styles/index.css';
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

Discussion (7)

Collapse
eserdinyo profile image
Muhammet ESER • Edited on

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.

Collapse
roarkmccolgan profile image
Roark McColgan

I was getting

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

this fixed the issue for me, thank you

Collapse
arielmejiadev profile image
Ariel Mejia Author

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

Collapse
ortonomy profile image
🅖🅡🅔🅖🅞🅡🅨 🅞🅡🅣🅞🅝

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

Collapse
arielmejiadev profile image
Ariel Mejia Author

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

Collapse
chandu4221 profile image
Chandra Shekhar .D

hi.. I'm having this issue

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

please help..

Collapse
ayoazeez26 profile image
Ayoazeez26

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