Semantic-Org · jlukic · Jun 13, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -4,6 +4,9 @@ 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
+* **Tailwinds** - Added a plugin for using tailwinds inside semantic ui components.
+
 # Version 0.11.3
 * **Input** - Fix placeholder focused color to be theme aware
 

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/tailwind.mdx b/docs/src/content/examples/tailwind.mdx
@@ -0,0 +1,9 @@
+---
+title: 'Tailwind'
+exampleType: 'component'
+category: 'UI Framework'
+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
diff --git a/docs/src/examples/tailwind/component.html b/docs/src/examples/tailwind/component.html
@@ -0,0 +1,32 @@
+{#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="rounded-xl bg-white p-10 text-sm leading-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>
+  <p class="font-semibold">
+    <a href="https://tailwindcss.com/docs" class="text-gray-950 underline decoration-sky-400 underline-offset-2 hover:underline-offset-4 dark:text-white">Read the docs &rarr;</a>
+  </p>
+</div>
+
diff --git a/docs/src/examples/tailwind/component.js b/docs/src/examples/tailwind/component.js
@@ -0,0 +1,27 @@
+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: [
+    `Customizing your theme with <code class="font-mono font-medium text-gray-950 dark:text-white">@theme</code>`,
+    `Adding custom utilities with <code class="font-mono font-medium text-gray-950 dark:text-white">@utility</code>`,
+    `Adding custom variants with <code class="font-mono font-medium text-gray-950 dark:text-white">@variant</code>`,
+    `Code completion with instant preview`,
+  ],
+};
+
+let definition = {
+  tagName: 'tailwind-demo',
+  template,
+  css,
+  defaultSettings,
+};
+
+// Transform with Tailwind plugin
+const transform = TailwindPlugin();
+definition = await transform(definition);
+
+export const TailwindDemo = defineComponent(definition);
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.