DEV Community

loading...

Use Tailwind 2 with Vue CLI

arielmejiadev profile image Ariel Mejia ・1 min read

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 (0)

pic
Editor guide