Registry / web-framework / vuetify-tailwind-utility-bridge

vuetify-tailwind-utility-bridge

library0.1.5jsnpmunverified

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.

web-framework

npm install vuetify-tailwind-utility-bridge

github ↗package ↗

INSTALL

IMPORT

SIG · VUETIFY-TAILWIND-U

vuetify-tailwind-utility-bridge

web-frameworkjavascriptv0.1.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vuetifyPlugin

✓ import { vuetifyPlugin } from 'vuetify-tailwind-utility-bridge';

✗ const vuetifyPlugin = require('vuetify-tailwind-utility-bridge').default;

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.

vuetifyPlugin

✓ const vuetifyUtilityBridgePlugin = require('vuetify-tailwind-utility-bridge'); module.exports = { plugins: [vuetifyUtilityBridgePlugin.vuetifyPlugin()] };

✗ const { vuetifyPlugin } = require('vuetify-tailwind-utility-bridge');

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.

Vuetify Theme Definition

✓ import type { ThemeDefinition } from 'vuetify';

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.

Demonstrates installation and basic configuration of the plugin within a Tailwind CSS project to enable Vuetify utility classes.

npm install vuetify-tailwind-utility-bridge tailwindcss // tailwind.config.js const vuetifyUtilityBridgePlugin = require('vuetify-tailwind-utility-bridge'); /** @type {import('tailwindcss').Config} */ module.exports = { // It's recommended to disable corePlugins for a cleaner setup if only using Vuetify utilities // corePlugins: [], content: [ './index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './components/**/*.{vue,js,ts,jsx,tsx}', // Ensure all files using Vuetify classes are scanned ], theme: { extend: {}, }, plugins: [ // Basic usage without custom theme injection vuetifyUtilityBridgePlugin.vuetifyPlugin() // Or with custom Vuetify theme for color mapping (requires a Vuetify ThemeDefinition object) // vuetifyUtilityBridgePlugin.vuetifyPlugin({ theme: yourVuetifyThemeObject }) ], };

Debug

Known issues

gotchaThis 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.

fix

Always review the latest README and changelog when updating the package. Pin major/minor versions to mitigate unexpected breaks during development.

affects: >=0.1.0

gotchaTo 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.

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`.

affects: >=0.1.0

gotchaThe 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.

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.

affects: >=0.1.0

gotchaWhile 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.

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.

affects: >=0.1.0

Errors

Common errors & fixes

Tailwind CSS IntelliSense not working for Vuetify classes in VSCode.

The VSCode extension for Tailwind CSS IntelliSense is either not installed or not configured to scan Vue/plaintext files.

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 }`.

ReferenceError: require is not defined in ESM context for tailwind.config.js

Your `tailwind.config.js` is being interpreted as an ES Module, but uses CommonJS `require` syntax.

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()] };`

Vuetify utility classes (e.g., `ma-2`, `text-primary`) are not applied in the browser.

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.

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.

Upgrade

Version history

0.1.5latest on npm

Audit

Dependencies

tailwindcssrequiredRequired 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.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/sugitata/vuetify-tailwind-utility-bridge ↗

packagehttps://www.npmjs.com/package/vuetify-tailwind-utility-bridge ↗