{"id":14315,"library":"vuetify-tailwind-utility-bridge","title":"Vuetify Tailwind Utility Bridge","description":"The `vuetify-tailwind-utility-bridge` package (current version 0.1.5) is a pre-1.0 Tailwind CSS plugin designed to integrate Vuetify-style utility classes into projects. Its primary use cases include enhancing VSCode's Tailwind CSS IntelliSense to provide autocomplete for standard Vuetify utility classes (like `.ma-1`, `.text-primary`, `.elevation-4`), and facilitating a gradual migration path for existing Vuetify projects towards a Tailwind CSS-based architecture. This allows developers to leverage familiar Vuetify utilities within a Tailwind ecosystem, align Figma design tokens with Tailwind conventions, and progressively refactor components. A key differentiator is its ability to enable Vuetify class autocomplete in VSCode even without a full Tailwind CSS installation, addressing the original motivation behind its creation. Being pre-1.0, it is under active development, with an implied rapid iteration cadence.","status":"active","version":"0.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/sugitata/vuetify-tailwind-utility-bridge","tags":["javascript","vuetify","tailwindcss","plugin","vuetify-utility","vuetify-tailwind","tailwindcss-plugin","vuetify-autocomplete","tailwind-migration","typescript"],"install":[{"cmd":"npm install vuetify-tailwind-utility-bridge","lang":"bash","label":"npm"},{"cmd":"yarn add vuetify-tailwind-utility-bridge","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuetify-tailwind-utility-bridge","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the plugin to function within a Tailwind CSS configuration and generate utility classes for migration or unified usage. While not strictly needed for autocomplete-only use cases, it's fundamental for the plugin's primary application.","package":"tailwindcss","optional":false}],"imports":[{"note":"The primary export is a named function intended for use within the Tailwind CSS `plugins` array. For TypeScript or modern JavaScript projects, named ESM imports are the standard.","wrong":"const vuetifyPlugin = require('vuetify-tailwind-utility-bridge').default;","symbol":"vuetifyPlugin","correct":"import { vuetifyPlugin } from 'vuetify-tailwind-utility-bridge';"},{"note":"While CommonJS `require` can be used, the package exports an object with `vuetifyPlugin` as a property. Destructuring `vuetifyPlugin` directly from `require()` might not work as expected if `vuetifyPlugin` isn't the sole export or directly exposed as such.","wrong":"const { vuetifyPlugin } = require('vuetify-tailwind-utility-bridge');","symbol":"vuetifyPlugin","correct":"const vuetifyUtilityBridgePlugin = require('vuetify-tailwind-utility-bridge'); module.exports = { plugins: [vuetifyUtilityBridgePlugin.vuetifyPlugin()] };"},{"note":"While the plugin supports injecting a `theme` object (e.g., `vuetifyPlugin({ theme: yourTheme })`), the `ThemeDefinition` type itself typically comes from the `vuetify` package, not `vuetify-tailwind-utility-bridge` directly.","symbol":"Vuetify Theme Definition","correct":"import type { ThemeDefinition } from 'vuetify';"}],"quickstart":{"code":"npm install vuetify-tailwind-utility-bridge tailwindcss\n\n// tailwind.config.js\nconst vuetifyUtilityBridgePlugin = require('vuetify-tailwind-utility-bridge');\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  // It's recommended to disable corePlugins for a cleaner setup if only using Vuetify utilities\n  // corePlugins: [], \n  content: [\n    './index.html',\n    './src/**/*.{vue,js,ts,jsx,tsx}',\n    './components/**/*.{vue,js,ts,jsx,tsx}',\n    // Ensure all files using Vuetify classes are scanned\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    // Basic usage without custom theme injection\n    vuetifyUtilityBridgePlugin.vuetifyPlugin()\n    \n    // Or with custom Vuetify theme for color mapping (requires a Vuetify ThemeDefinition object)\n    // vuetifyUtilityBridgePlugin.vuetifyPlugin({ theme: yourVuetifyThemeObject })\n  ],\n};","lang":"javascript","description":"Demonstrates installation and basic configuration of the plugin within a Tailwind CSS project to enable Vuetify utility classes."},"warnings":[{"fix":"Always review the latest README and changelog when updating the package. Pin major/minor versions to mitigate unexpected breaks during development.","message":"This package is pre-1.0 (version 0.1.5) and as such, its API and internal implementation may be subject to breaking changes without adhering to semantic versioning until a stable 1.0 release. Backward compatibility is not guaranteed across minor versions.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Install `bradlc.vscode-tailwindcss` from the VSCode Marketplace. Add `\"tailwindCSS.includeLanguages\": { \"vue\": \"html\", \"plaintext\": \"html\" }, \"editor.quickSuggestions\": { \"strings\": true }` to your `.vscode/settings.json`.","message":"To get full IntelliSense (autocomplete) for Vuetify utility classes, you MUST install the 'Tailwind CSS IntelliSense' VSCode extension (`bradlc.vscode-tailwindcss`) and configure your `.vscode/settings.json` to include Vue and plaintext files.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Review the 'Unsupported Features' section of the README. For unsupported features, consider writing custom Tailwind CSS utilities or using direct CSS for those specific cases.","message":"The plugin does not support certain advanced Vuetify features, including RTL mode, expanding CSS variables (e.g., `var(–v-hover-opacity);`), and some partial typography utilities. Attempting to use these features may result in missing or incorrect styling.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If using for class generation, ensure `tailwindcss` is installed (`npm install tailwindcss`) and configured correctly in `tailwind.config.js` and your CSS build pipeline.","message":"While the plugin can provide IntelliSense for Vuetify classes without Tailwind CSS being installed, for the plugin to actually *generate* and apply those utilities in your build output (e.g., for migration), Tailwind CSS itself must be installed and properly configured.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'-1':53 '-1.0':18,128 '-4':58 '0.1.5':14 'abil':104 'activ':132 'address':119 'align':88 'allow':77 'architectur':75 'autocomplet':45,109,155 'base':74 'behind':123 'bridg':4,10 'cadenc':139 'case':35 'class':29,50,108 'compon':98 'convent':94 'creation':125 'css':20,41,73,117 'css-base':72 'current':12 'design':22,90 'develop':78,133 'differenti':101 'ecosystem':87 'elev':57 'enabl':106 'enhanc':37 'even':112 'exist':66 'facilit':60 'familiar':81 'figma':89 'full':115 'gradual':62 'impli':136 'includ':36 'instal':118 'integr':24 'intellisens':42 'iter':138 'javascript':140 'key':100 'leverag':80 'like':51 'ma':52 'migrat':63,158 'motiv':122 'origin':121 'packag':11 'path':64 'plugin':21,143,152 'pre':17,127 'primari':33,56 'progress':96 'project':31,68 'provid':44 'rapid':137 'refactor':97 'standard':47 'style':27 'tailwind':2,8,19,40,71,86,93,116,149,157 'tailwind-migr':156 'tailwindcss':142,151 'tailwindcss-plugin':150 'text':55 'text-primari':54 'token':91 'toward':69 'typescript':159 'use':34 'util':3,9,28,49,83,146 'version':13 'vscode':38,111 'vuetifi':1,7,26,48,67,82,107,141,145,148,154 'vuetify-autocomplet':153 'vuetify-styl':25 'vuetify-tailwind':147 'vuetify-tailwind-utility-bridg':6 'vuetify-util':144 'within':84 'without':113","created_at":"2026-04-20T01:59:04.388354+00:00","updated_at":"2026-04-20T01:59:04.388354+00:00","problems":[{"fix":"Install the 'Tailwind CSS IntelliSense' extension by `bradlc`. Add the following to your `.vscode/settings.json`: `\"tailwindCSS.includeLanguages\": { \"vue\": \"html\", \"plaintext\": \"html\" }, \"editor.quickSuggestions\": { \"strings\": true }`.","cause":"The VSCode extension for Tailwind CSS IntelliSense is either not installed or not configured to scan Vue/plaintext files.","error":"Tailwind CSS IntelliSense not working for Vuetify classes in VSCode."},{"fix":"Rename `tailwind.config.js` to `tailwind.config.cjs` or use ESM `import` syntax: `import { vuetifyPlugin } from 'vuetify-tailwind-utility-bridge'; export default { plugins: [vuetifyPlugin()] };`","cause":"Your `tailwind.config.js` is being interpreted as an ES Module, but uses CommonJS `require` syntax.","error":"ReferenceError: require is not defined in ESM context for tailwind.config.js"},{"fix":"Ensure `tailwind.config.js` includes `plugins: [vuetifyUtilityBridgePlugin.vuetifyPlugin()]` and that your build process (e.g., PostCSS, Vite, webpack) is correctly compiling your Tailwind CSS.","cause":"The `vuetify-tailwind-utility-bridge` plugin is not correctly integrated into your `tailwind.config.js`, or the Tailwind CSS build process is not generating the CSS.","error":"Vuetify utility classes (e.g., `ma-2`, `text-primary`) are not applied in the browser."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/sugitata/vuetify-tailwind-utility-bridge","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vuetify-tailwind-utility-bridge","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}