Tailwind Mixin

1import { adoptStyles, type LitElement, unsafeCSS } from "lit";
2import tailwindCss from "@/styles/tailwind.global.css?inline";
3 
4declare global {
5  // biome-ignore lint/suspicious/noExplicitAny: Required for mixin pattern compatibility
6  export type LitMixin<T = unknown> = new (...args: any[]) => T & LitElement;
7}
8 
9export const tailwind = unsafeCSS(tailwindCss);
10 
11// https://github.com/tailwindlabs/tailwindcss/issues/15005
12// Set all @property values from tailwind on the document
13// And only do this once (check if there is already a stylesheet with the same content)
14if (
15  tailwind.styleSheet &&
16  document?.adoptedStyleSheets &&
17  !document.adoptedStyleSheets.some(
18    (sheet) =>
19      sheet.cssRules[0]?.cssText === tailwind.styleSheet?.cssRules[0].cssText,
20  )
21) {
22  const propertiesSheet = new CSSStyleSheet();
23  let code = tailwind.cssText;
24  code = code
25    .replaceAll("inherits: false", "inherits: true")
26    .substring(code.indexOf("@property"));
27  propertiesSheet.replaceSync(code);
28  document.adoptedStyleSheets.push(propertiesSheet);
29}
30 
31export const TW = <T extends LitMixin>(superClass: T): T =>
32  class extends superClass {
33    connectedCallback() {
34      super.connectedCallback();
35      if (this.shadowRoot) adoptStyles(this.shadowRoot, [tailwind]);
36    }
37  };