Merge pull request #70 from Semantic-Org/feat/tailwind4

Feat/tailwind4

Author: jlukic

.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

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
 

docs/astro.config.mjs

@@ -63,7 +63,7 @@ export default defineConfig({
     },
     optimizeDeps: {
       force: true,
-      exclude: ['playground-elements'],
+      exclude: ['playground-elements', 'tailwindcss-iso'],
     },
   },
 

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') {

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

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
+---

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 *));

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>

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);

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;
+}