{"name":"tailwind-mixin","type":"registry:lib","title":"Tailwind Mixin","description":"A set of Tailwind CSS mixins for Lit components, enabling easy integration of Tailwind styles within web components.","categories":["ui","web-component"],"author":"Lloyd Richards <lloyd.d.richards@gmail.com>","dependencies":["tailwind-merge","tw-animate-css","class-variance-authority","clsx"],"files":[{"path":"registry/lib/tailwindMixin.ts","type":"registry:lib","content":"import { adoptStyles, type LitElement, unsafeCSS } from \"lit\";\nimport tailwindCss from \"@/styles/tailwind.global.css?inline\";\n\ndeclare global {\n  // biome-ignore lint/suspicious/noExplicitAny: Required for mixin pattern compatibility\n  export type LitMixin<T = unknown> = new (...args: any[]) => T & LitElement;\n}\n\nexport const tailwind = unsafeCSS(tailwindCss);\n\n// https://github.com/tailwindlabs/tailwindcss/issues/15005\n// Set all @property values from tailwind on the document\n// And only do this once (check if there is already a stylesheet with the same content)\nif (\n  tailwind.styleSheet &&\n  document?.adoptedStyleSheets &&\n  !document.adoptedStyleSheets.some(\n    (sheet) =>\n      sheet.cssRules[0]?.cssText === tailwind.styleSheet?.cssRules[0].cssText,\n  )\n) {\n  const propertiesSheet = new CSSStyleSheet();\n  let code = tailwind.cssText;\n  code = code\n    .replaceAll(\"inherits: false\", \"inherits: true\")\n    .substring(code.indexOf(\"@property\"));\n  propertiesSheet.replaceSync(code);\n  document.adoptedStyleSheets.push(propertiesSheet);\n}\n\nexport const TW = <T extends LitMixin>(superClass: T): T =>\n  class extends superClass {\n    connectedCallback() {\n      super.connectedCallback();\n      if (this.shadowRoot) adoptStyles(this.shadowRoot, [tailwind]);\n    }\n  };\n"},{"path":"registry/lib/tailwindMixin.d.ts","type":"registry:lib","content":"import { type LitElement } from \"lit\";\ndeclare global {\n  export type LitMixin<T = unknown> = new (...args: any[]) => T & LitElement;\n}\nexport declare const TW: <T extends LitMixin>(superClass: T) => T;\n"},{"path":"registry/lib/utils.ts","type":"registry:lib","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"}],"docs":"IMPORTANT: You must create a Tailwind CSS global file. See setup instructions at https://lit-registry.lloydrichards.dev or copy the template from https://github.com/lloydrichards/shadcn-lit-registry/blob/main/registry/styles/tailwind.global.css"}