How to use Tailwind CSS in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using Tailwind CSS with Vue enables rapid development with utility-first styling, providing pre-built classes for responsive design, spacing, colors, and component styling. As the creator of CoreUI, a widely used open-source UI library, I’ve integrated Tailwind CSS with Vue applications across numerous enterprise projects for rapid prototyping and custom design systems. From my expertise, the most effective approach is to install Tailwind CSS with PostCSS configuration. This method provides full utility access, purging for optimized builds, and seamless integration with Vue’s styling workflow.
Install Tailwind CSS with PostCSS and configure it for Vue projects with utility-first styling approach.
# Install Tailwind CSS and dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// tailwind.config.js
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
}
/* src/assets/css/tailwind.css */
@tailwind base
@tailwind components
@tailwind utilities
<template>
<div class="min-h-screen bg-gray-50 p-8">
<div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
<h1 class="text-2xl font-bold text-gray-900">{{ title }}</h1>
<p class="text-gray-600 mt-2">{{ subtitle }}</p>
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
Get Started
</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const title = ref('Tailwind CSS with Vue')
const subtitle = ref('Utility-first CSS framework')
</script>
Install Tailwind CSS with PostCSS configuration and include the CSS file in your main.js. Configure the content paths in tailwind.config.js to include all Vue files for proper purging. Use utility classes directly in templates for styling, and leverage responsive prefixes like sm:, md:, lg: for responsive design. Combine with Vue’s computed properties for dynamic class generation.
Best Practice Note:
This is the same approach we use when integrating Tailwind CSS with Vue components in CoreUI enterprise projects.
