A Tailwind CSS plugin to bring Vuetify utility classes for autocomplete and migration use cases.
npm install vuetify-tailwind-utility-bridgeTailwind CSS plugin that brings Vuetify-style utility classes to your project.
Enables Figma design token alignment, Tailwind auto-completion, and incremental migration from Vuetify to Tailwind.
A Tailwind CSS plugin that provides Vuetify-like utility classes — for autocomplete support and progressive migration from Vuetify to Tailwind.
This package is designed with two main use cases:
- Enables Tailwind CSS IntelliSense (autocomplete) for Vuetify utility classes like .ma-1, .text-primary, .elevation-4, etc.
- see Vuetify utilities
- This does not require Tailwind CSS to be installed in your project.
- This was the original motivation behind creating this plugin — enabling autocomplete even in a Vuetify-only project.
#### 🛠 Recommended VSCode settings
Add the following to your .vscode/settings.json:
``json`
{
"tailwindCSS.includeLanguages": {
"vue": "html",
"plaintext": "html"
},
"editor.quickSuggestions": {
"strings": true
}
}
- 🔧 Provides Vuetify-style utility classes (.d-flex, .ma-2, .rounded-lg, etc.)
- 🎨 Maps Vuetify design tokens to Tailwind utility conventions
- 🧩 Enables Tailwind IntelliSense / autocomplete in VSCode
- 📦 Lightweight and framework-agnostic plugin
- 🪜 Perfect for incremental migration from Vuetify to Tailwind
- Theme injection (only Colors)
- RTL mode
- Expand css variables (e.g. var(–v-hover-opacity);)
- partial typography utilities(see src/generated/vuetifyUtilities.ts)
---
`bash`
npm install vuetify-tailwind-utility-bridge
---
1. Add Tailwind CSS IntelliSense in your VSCode
2. Add this plugin on your tailwindcss.config.js
1. You don't need to install tailwindcss if you want to use this module for autocompletion.
`js
const vuetifyUtilityBridgePlugin = require('vuetify-tailwind-utility-bridge');
/* @type {import('tailwindcss').Config} /
module.exports = {
corePlugins: [],
content: ['/.vue', '/.js', '*/.ts'],
plugins: [vuetifyUtilityBridgePlugin.vuetifyPlugin()],
// or your Vuetify theme (yourTheme: Vuetify ThemeDefinition)
// plugins: [vuetifyUtilityBridgePlugin.vuetifyPlugin({ theme: yourTheme })],
};
``
---
- Bring Tailwind-class auto-completion to Vuetify-based components
- Use it as a design token bridge between Vuetify and Figma
- Gradually refactor Vuetify components into Tailwind
---
MIT