DEV Community

Cover image for Vue + Tailwindcss config
CodewithGuillaume
CodewithGuillaume

Posted on

Vue + Tailwindcss config

#vue #tailwindcss #javascript

How to configure Tailwindcss with Vue

  1. Install Tailwind via npm 
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode
  1. Create your configuration files 
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
  1. 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: [],
  }
Enter fullscreen mode Exit fullscreen mode
  1. Include Tailwind in your CSS 
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  1. 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')
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

carlossanson profile image

How I keep my ExpressJS & React apps fast with server-side caching

Carlos Sansón -

chriisduran profile image

Simulate a black hole for React Native app?

Christopher Duran -

jamescroissant profile image

What React beginners should know about React 19 first.

Yu Hamada -

balastrong profile image

What I DON'T like about shadcn/ui

Leonardo Montini -