tailwind-web-components v1.0.0

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

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.