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