From d3b4782bbed3316820e18e74b50d1af8b55eaaa3 Mon Sep 17 00:00:00 2001 From: 0xmiki <0xmik@proton.me> Date: Mon, 16 Jun 2025 20:43:54 +0300 Subject: [PATCH 1/2] updated the get started page with tailwind v4 guide and added shell.nix file --- packages/svelte-ux/src/routes/+page.svelte | 117 +++++++-------------- shell.nix | 8 ++ 2 files changed, 48 insertions(+), 77 deletions(-) create mode 100644 shell.nix diff --git a/packages/svelte-ux/src/routes/+page.svelte b/packages/svelte-ux/src/routes/+page.svelte index f37607741..128b83415 100644 --- a/packages/svelte-ux/src/routes/+page.svelte +++ b/packages/svelte-ux/src/routes/+page.svelte @@ -33,7 +33,7 @@
Add Svelte UX package
- + {:else if selectedTab === 'manual'}
Follow the Tailwind @@ -42,93 +42,56 @@
Add Svelte UX package
- + {/if} {#if selectedTab === 'svelte-cli' || selectedTab === 'manual'} -
Update tailwind.config.cjs
+
Update app.css
+:root { + --color-primary: var(--color-purple-700); + --color-secondary: var(--color-orange-500); + + &.dark { + --color-primary: var(--color-purple-400); + --color-surface-100: var(--color-zinc-900); + --color-surface-200: var(--color-zinc-950); + --color-surface-300: var(--color-black); + } +} +`} + language="css" /> {/if} -

A few notes regarding the tailwind.config.cjs

- -
    -
  • - {`./node_modules/svelte-ux/**/*.{(svelte, js)}`} adds the library classes via - JIT -
    • + Theme setup: +
    • - ux.themes is used to configure the theme colors. See - customization for more details. + The line @import '@layerstack/tailwind/themes/basic.css'; in the CSS example + above provides basic light and dark theme support. If you require multiple light/dark + themes, or want to use pre-built themes like Skeleton or Daisy UI (which is what the + Svelte UX docs use), you should replace this line with + @import '@layerstack/tailwind/themes/all.css';.
    • - Tailwind plugin injects the theme color variables, sets border, outline, ring, and typograpy - defauls based on the theme, and adds additional utility classes including: -
        -
      • - elevation-# for - realistic shadows - using multiple shadow layers, unlike the current Tailwind - shadows - which have at most 2 layers. -
        • -
      • - grid-stack to easily stack grid children -
        • -
      • - scrollbar-none to hide the scrollbar -
        • -
      + @layerstack/tailwind (the theme system used by Svelte UX) was migrated to be css-only. You + can see the source on the next branch here
    diff --git a/shell.nix b/shell.nix new file mode 100644 index 000000000..211363925 --- /dev/null +++ b/shell.nix @@ -0,0 +1,8 @@ +{ pkgs ? import {} }: + +pkgs.mkShell { + buildInputs = with pkgs; [ + nodejs + pnpm + ]; +} \ No newline at end of file From 9b6d70b9502a558fec1aa2f4a892d17f515e05bb Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Mon, 16 Jun 2025 15:27:19 -0400 Subject: [PATCH 2/2] Run `pnpm format` --- packages/svelte-ux/src/routes/+page.svelte | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/svelte-ux/src/routes/+page.svelte b/packages/svelte-ux/src/routes/+page.svelte index 128b83415..192b0f93a 100644 --- a/packages/svelte-ux/src/routes/+page.svelte +++ b/packages/svelte-ux/src/routes/+page.svelte @@ -78,17 +78,18 @@
    • The line @import '@layerstack/tailwind/themes/basic.css'; in the CSS example - above provides basic light and dark theme support. If you require multiple light/dark - themes, or want to use pre-built themes like Skeleton or Daisy UI (which is what the - Svelte UX docs use), you should replace this line with + > + use), you should replace this line with @import '@layerstack/tailwind/themes/all.css';.
    • - @layerstack/tailwind (the theme system used by Svelte UX) was migrated to be css-only. You - can see the source on the next branch here