Semantic-Org · jlukic · Jun 13, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,9 @@ dist/
 tests/results/
 tests/test-case/dist
 
+# for my ai friends
+ai/meta/agent-guestbook.md
+
 # Numerous always-ignore extensions
 *.diff
 *.err

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -4,6 +4,28 @@ This is a pre-release version and APIs will change quickly. Before `1.0` release
 
 Please note after `1.0` Semver will be followed using normal protocols.
 
+# Version 0.12.0
+* **Tailwind** - Added a plugin for using Tailwind inside Semantic UI components. This can be used alongside the css tokens provided by the css framework, or instead of it. This will scan your component javascript, html and css and attach only the tailwind styles used.
+
+> Note: the plugin code may be modified if `defineComponent` gets a formal 'Plugin API'. For now you will need to pass in the component to the plugin before defining the component.
+
+
+```javascript
+import { TailwindPlugin } from '@semantic-ui/tailwind';
+const tailwindPlugin = TailwindPlugin();
+
+
+// Transform with Tailwind plugin
+const definition = {
+  // your component definition
+  template: `<div class="p-4 bg-red-500"></div>`
+}
+defineComponent( await tailwindPlugin(definition) );
+
+```
+
+* **Template Compiler** - Fixed an issue with nested conditionals inside svg.
+
 # Version 0.11.3
 * **Input** - Fix placeholder focused color to be theme aware
 

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -63,7 +63,7 @@ export default defineConfig({
     },
     optimizeDeps: {
       force: true,
-      exclude: ['playground-elements'],
+      exclude: ['playground-elements', 'tailwindcss-iso'],
     },
   },
 

diff --git a/docs/src/components/CodePlayground/CodePlayground.js b/docs/src/components/CodePlayground/CodePlayground.js
@@ -398,7 +398,6 @@ const createComponent = (
     // and the right pane is just the iframe preview
     if (filter && self.onlyPageFiles(fileArray)) {
       if (filter == 'main') {
-        console.log(fileArray.filter(file => self.isPageFile(file.filename)));
         return fileArray.filter(file => self.isPageFile(file.filename));
       }
       else if (filter == 'page') {

diff --git a/docs/src/content/examples/cdn.mdx b/docs/src/content/examples/cdn.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'CDN'
 exampleType: 'page'
-category: 'UI Framework'
+category: 'Components'
 subcategory: 'Usage'
 tags: ['component', 'usage']
 description: An example of using the component framework from a cdn

diff --git a/docs/src/content/examples/tailwind.mdx b/docs/src/content/examples/tailwind.mdx
@@ -0,0 +1,9 @@
+---
+title: 'Tailwind'
+exampleType: 'component'
+category: 'Components'
+subcategory: 'Usage'
+fold: false
+tags: ['component', 'usage']
+description: An example of using Tailwinds with web components
+---
diff --git a/docs/src/examples/tailwind/component.css b/docs/src/examples/tailwind/component.css
@@ -0,0 +1,15 @@
+/*
+  Example using @theme inside a component
+
+*/
+
+@theme {
+  /* This changes the bluish grays to a monochrome color */
+  --color-gray-100: theme(colors.zinc.100);
+  --color-gray-300: theme(colors.zinc.300);
+  --color-gray-700: theme(colors.zinc.700);
+  --color-gray-950: theme(colors.zinc.950);
+}
+
+/* this allows us to add "dark" class to component to trigger dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/docs/src/examples/tailwind/component.html b/docs/src/examples/tailwind/component.html
@@ -0,0 +1,39 @@
+{#snippet bullet}
+  <li class="flex">
+    <svg class="h-6 w-6 flex-shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square">
+      <circle cx="11" cy="11" r="11" class="fill-sky-400 opacity-25" />
+      <circle cx="11" cy="11" r="10.5" class="stroke-sky-400 opacity-25" />
+      <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
+    </svg>
+    <p class="ml-3">
+      {#html content}
+    </p>
+  </li>
+{/snippet}
+
+<div class="component {darkMode ? 'dark' : ''}">
+  <div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
+    <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10">
+      <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
+          <img src="https://play.tailwindcss.com/img/logo.svg" class="mb-12 h-6 dark:hidden" alt="Tailwind Play" />
+          <img src="https://play.tailwindcss.com/img/logo-dark.svg" class="mb-12 h-6 hidden dark:block" alt="Tailwind Play" />
+          <div class="space-y-6">
+            <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
+            <ul class="space-y-3">
+            {#each item in proofPoints}
+              {>bullet content=item}
+            {/each}
+          </ul>
+          <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
+        </div>
+        <hr class="my-6 w-full border-gray-200 dark:border-gray-700" />
+        <p class="mb-3">Want to dig deeper into Tailwind?</p>
+        <ui-button primary href="https://tailwindcss.com/docs" icon="open book">Read the docs</ui-button>
+      </div>
+    </div>
+    <div class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
+    <div class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
+    <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div>
+    <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div>
+  </div>
+</div>
diff --git a/docs/src/examples/tailwind/component.js b/docs/src/examples/tailwind/component.js
@@ -0,0 +1,21 @@
+import { defineComponent, getText } from '@semantic-ui/component';
+import { TailwindPlugin } from '@semantic-ui/tailwind';
+
+const template = await getText('./component.html');
+const css = await getText('./component.css');
+
+const defaultSettings = {
+  proofPoints: [],
+};
+
+let definition = {
+  tagName: 'tailwind-demo',
+  template,
+  css,
+  defaultSettings,
+};
+
+// Transform with Tailwind plugin
+definition = await TailwindPlugin(definition);
+
+export const TailwindDemo = defineComponent(definition);
diff --git a/docs/src/examples/tailwind/page.css b/docs/src/examples/tailwind/page.css
@@ -0,0 +1,8 @@
+html {
+  /*
+    note tailwind base em size is 16px instead of semantic ui's 14px
+    this means to have everything sized the same as other tailwind projects
+    when using sui + tailwinds you will want to resize semantic components
+  */
+  --font-size: 16px;
+}
diff --git a/docs/src/examples/tailwind/page.js b/docs/src/examples/tailwind/page.js
@@ -0,0 +1,10 @@
+import { $ } from '@semantic-ui/query';
+
+$('tailwind-demo').settings({
+  proofPoints: [
+    `Customizing your theme with <code>@theme</code>`,
+    `Adding custom utilities with <code>@utility</code>`,
+    `Adding custom variants with <code>@variant</code>`,
+    `Code completion with instant preview`,
+  ],
+});
diff --git a/docs/src/pages/examples/importmap.json.js b/docs/src/pages/examples/importmap.json.js
@@ -12,6 +12,7 @@ export const npmPackages = [
   '@semantic-ui/renderer',
   '@semantic-ui/query',
   '@semantic-ui/specs',
+  '@semantic-ui/tailwind',
   '@semantic-ui/utils',
 ];
 
@@ -26,6 +27,7 @@ export const localPackages = [
   '@semantic-ui/core/packages/specs',
   '@semantic-ui/core/packages/utils',
   '@semantic-ui/core/packages/reactivity',
+  '@semantic-ui/core/packages/tailwind',
 ];
 
 // note NPM packages is no longer used for static builds
@@ -39,11 +41,10 @@ const packageImports = { imports: {} };
 
 for (const pkg of importPackages) {
   try {
-
     // use jsdelivr
-    if(isStaticBuild) {
+    if (isStaticBuild) {
       let url = `${packageBase}/${pkg}/`;
-      if(packageBase.includes('jsdelivr')) {
+      if (packageBase.includes('jsdelivr')) {
         url += '+esm';
       }
       packageImports.imports[pkg] = url;
@@ -88,6 +89,7 @@ export const importMap = packageImports;
 export const importMapJSON = JSON.stringify(packageImports, null, 2);
 
 export const GET = async () => {
+  console.log(importMapJSON);
   return new Response(importMapJSON, {
     headers: {
       'Content-Type': 'application/importmap+json',

diff --git a/docs/src/pages/examples/package.json.js b/docs/src/pages/examples/package.json.js
@@ -17,7 +17,6 @@ export const packageFile = {
 };
 
 export const packageJSON = JSON.stringify(packageFile, null, 2);
-
 export const GET = async () => {
   return new Response(packageJSON, {
     headers: {

diff --git a/internal-packages/esbuild-callback/LICENSE b/internal-packages/esbuild-callback/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Jack Lukic
+Copyright (c) 2025 Jack Lukic
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
diff --git a/internal-packages/esbuild-resolve-bare-imports/LICENSE b/internal-packages/esbuild-resolve-bare-imports/LICENSE
@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2024 Jack Lukic
+Copyright (c) 2025 Jack Lukic
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

diff --git a/internal-packages/scripts/package.json b/internal-packages/scripts/package.json
@@ -38,5 +38,8 @@
     "@semantic-ui/specs": "^0.11.2",
     "esbuild": "^0.25.1",
     "tiny-glob": "^0.2.9"
+  },
+  "devDependencies": {
+    "@chialab/esbuild-plugin-worker": "^0.18.1"
   }
 }
diff --git a/internal-packages/scripts/src/lib/config.js b/internal-packages/scripts/src/lib/config.js
@@ -1,5 +1,6 @@
 // package is package.json
-export const getBanner = (packageFile) => `/**
+export const getBanner = (packageFile) =>
+  `/**
  * ${packageFile.name} v${packageFile.version}
  * ${packageFile.description || ''}
  *
@@ -11,19 +12,17 @@ export const getBanner = (packageFile) => `/**
  * LICENSE file in the root directory of this source tree.
  */`;
 
-
 // This is used for files build internally to concatenate css (see build-ui-deps.js)
- export const INTERNAL_CSS_BANNER = `/**
+export const INTERNAL_CSS_BANNER = `/**
   ---DO NOT EDIT THIS FILE DIRECTLY---
   This CSS file was concatenated from files listed in the css/ folder as part of a build process
   This is to allow for js import with @import links which will not be followed
 **/
-`
+`;
 
- export const TARGET_BROWSERS = ['chrome80', 'edge80', 'firefox78', 'safari14', 'ios14', 'opera67'];
+export const TARGET_BROWSERS = ['chrome80', 'edge80', 'firefox78', 'safari14', 'ios14', 'opera67'];
 
 export const JS_BUILD_CONFIG = {
-
   // target browser by default for dist
   target: TARGET_BROWSERS,
 
@@ -40,6 +39,7 @@ export const JS_BUILD_CONFIG = {
     '.ts': 'ts',
     '.html': 'text',
     '.css': 'text',
+    '.wasm': 'file',
     '.png': 'file',
     '.svg': 'file',
     '.jpg': 'file',
@@ -49,7 +49,6 @@ export const JS_BUILD_CONFIG = {
 };
 
 export const CSS_BUILD_CONFIG = {
-
   // target browser by default for dist
   target: TARGET_BROWSERS,