Tailwind Web Components

This is package that enables you to create a web components library powered by Vue3 SFCs and Tailwind without bloating your code in the process.

Features

• Single Tailwind stylesheet available to all components
• Build your components as Vue3 SFCs
• Use either CSS-in-JS or standard CSS files for Tailwind output
• Sync or Async components supported
• Hot Module Reloading for Web Component styles
• Inlined styles from SFC <style> blocks
• Automatically reads your POSTCSS config

Installation

npm i -D tailwind-web-components
# OR
pnpm add -D tailwind-web-components

Usage

// vite.config.js
import { tailwindWebComponents } from "tailwind-web-components";

export default {
  plugins: [
    tailwindWebComponents({
      stylesheet: "./src/css/style.postcss",
    }),
  ],
};

// entry.js
import { defineCustomElement } from "virtual:tailwind-web-components";
import { defineAsyncComponent } from "vue";

import SomeSyncComponent from "./components/SomeSyncComponent.ce.vue";
globalThis.customElements.define(
  "twc-some-component",
  defineCustomElement(SomeSyncComponent)
);

const AsyncComponent = defineCustomElement(
  defineAsyncComponent(() => import("./components/AsyncComponent.ce.vue"))
);
globalThis.customElements.define("twc-another-component", AsyncComponent);

Note that we're importing defineCustomElement from a virtual namespace and not the version from "vue".

Props

In your vite.config.js file, you can pass the following props to the Vite plugin

Prop	Type	Default	Description
config	object		The single-object config
config.stylesheet	string		The path (relative to vite.config.js) of your stylesheet
config.vueConfig	object	{}	Config options to pass to the @vitejs-plugin-vue plugin
config.sourceMap	boolean	false	Generate inline source-maps for the stylesheet?
config.injectCss	boolean	true	Inject the CSS into the document.head using JS
config.minify	boolean	true	Minify the CSS output when in production mode

Caveats

• Not tested with SSR yet.
• If you choose not to inject CSS into the document head, it will be duplicated in your JS file.