Vue + Tailwindcss config
How to configure Tailwindcss with Vue
Updated
•1 min read
G
CTO of Allocations.com, a finance SaaS Miami-based, I am running a YouTube channel: @codewithguillaume. With 15 years of exp. as a freelancer, consultant, and Lead Developer, I have led dozens of engineering teams across Paris, London, and Berlin. I am father of 2 and I live in Dubai.
1. Install Tailwind via npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
2. Create your configuration files
npx tailwindcss init -p
3. Configure Tailwind to remove unused styles in production
// tailwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
4. Include Tailwind in your CSS
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Import your CSS in main.js
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
