Vue useTailwind

Bring Tailwind's JIT compiler to the browser with features designed around building your own WYSIWYG or CMS.

• Tailwind v4+
• Supports user-provided themes
• Supports user-provided plugins
• Use in the main DOM or in isolated Shadow DOM components
• Run multiple different instances on the same page
• Get a reactive list of your used classes

See demo at https://evo-mark.github.io/vue-use-tailwind/

Not affiliated with the @vueuse project

Install

pnpm add vue-use-tailwind

Usage

Below is a basic example of useTailwind inside a shadow DOM.

No styles or CSS applied outside the shadow DOM will affect the editor content and a clean Tailwind stylesheet will be reactively applied to content inside the tiptap editor.

<template>
	<ShadowRoot ref="shadow">
		<EditorContent :editor="editor" />
	</ShadowRoot>
</template>

<script setup>
	import { useEditor, EditorContent } from "@tiptap/vue-3";
	import StarterKit from "@tiptap/starter-kit";
	import { ShadowRoot } from "vue-shadow-dom";
	import { useTailwind } from "vue-use-tailwind";

	const { classes } = useTailwind(shadowRef);

	const editor = useEditor({
		content: `<p class="text-orange-400">I'm running Tiptap with Vue.js. 🎉</p>`,
		extensions: [StarterKit],
	});
</script>

Theme config

You can also pass theme configuration CSS to useTailwind.

const { classes } = useTailwind(shadowRef, {
	theme: [{ content: "--color-mint-500: oklch(0.72 0.11 178);" }],
});

The theme parameter can contain a string, an array of strings, or an array of ThemeConfigItems:

interface ThemeConfigItem {
	isInline?: boolean; // optional
	isStatic?: boolean; // optional
	content: string;
}

Plugins

If you want your stylesheet to load additional plugins, you must pass them to the useTailwind composable:

import { useTailwind } from "vue-use-tailwind";
import TailwindTypography from "@tailwindcss/typography";

const { classes } = useTailwind(shadowRef, {
	theme: "--color-mint-500: oklch(0.72 0.11 178);",
	plugins: [TailwindTypography],
});

Note: Neither theme nor plugins are reactive.

Support Open-Source Software

We're providing this package free-of-charge to the community. However, all development and maintenance costs time, energy and money. So please help fund this project if you can.

---

For full installation instructions and documentation, visit evoMark (coming soon).