Updated the info message and ran formatting check (#609)

* Added banner to redirect to the "next" version and a shell.nix file for convenience when developing on nix systems

* tell user to manually install tailwind v3

* Update messaeg and format

* Use list to improve layout

* Remove point release

* Tweak message

---------

Co-authored-by: Sean Lynch <[email protected]>

Author: 0xmiki

packages/svelte-ux/src/routes/+layout.svelte

@@ -15,6 +15,7 @@
     ThemeSwitch,
     Tooltip,
     settings,
+    Icon,
   } from 'svelte-ux';
   import { DEV } from 'esm-env';
 
@@ -213,14 +214,25 @@
 <!-- Set theme before anything renders (even when SSR is in use) -->
 <ThemeInit />
 
-<AppLayout>
+<AppLayout headerHeight={96}>
   <svelte:fragment slot="nav">
     <NavMenu />
     <!-- Spacer -->
     <div class="h-4"></div>
   </svelte:fragment>
 
-  <AppBar {title}>
+  <AppBar {title} class="pt-8">
+    <div
+      class="fixed top-0 left-0 w-full h-8 bg-primary-700 border-b border-primary-800/50 shadow flex gap-2 items-center justify-center text-sm font-medium"
+    >
+      Svelte UX for Tailwind 4 released! -
+      <a
+        href="https://next.svelte-ux.techniq.dev/"
+        class="font-semibold underline-offset-2 hover:underline"
+      >
+        Preview <Icon data={mdiArrowTopRight} class="text-xs mt-[-2px]" />
+      </a>
+    </div>
     <div slot="actions" class="flex gap-3">
       <Button
         href="https://www.layerchart.com"

packages/svelte-ux/src/routes/+page.svelte

@@ -1,54 +1,33 @@
 <script lang="ts">
-  import { Kbd, ToggleGroup, ToggleOption } from 'svelte-ux';
-
+  import { Kbd } from 'svelte-ux';
   import Code from '$lib/components/Code.svelte';
-
-  let selectedTab = 'svelte-cli';
 </script>
 
 <div class="prose max-w-none bg-surface-100 rounded border p-4 mt-4 m-2">
   <h1>Getting started</h1>
 
   <h2>Installation</h2>
-  <ToggleGroup
-    bind:value={selectedTab}
-    variant="underline"
-    classes={{ options: 'justify-start h-10 mb-3' }}
-  >
-    <ToggleOption value="svelte-cli">Svelte CLI</ToggleOption>
-    <ToggleOption value="manual">Manual Install</ToggleOption>
-  </ToggleGroup>
-
   <div class="grid gap-3">
-    {#if selectedTab === 'svelte-cli'}
-      <div>
-        Start a new project SvelteKit project with <a
-          href="https://svelte.dev/docs/cli/overview"
-          target="_blank">sv</a
-        > cli
-      </div>
-      <Code source={`npm sv create`} language="sh" />
-
-      <div>Select Tailwind during setup OR run</div>
-      <Code source={`npx sv add tailwindcss`} language="sh" />
-
-      <div>Add Svelte UX package</div>
-      <Code source={`npm install svelte-ux`} language="sh" />
-    {:else if selectedTab === 'manual'}
-      <div>
-        Follow the Tailwind <a href="https://tailwindcss.com/docs/guides/sveltekit" target="_blank">
-          guide
-        </a> to setup a new SvelteKit project with Tailwind.
-      </div>
-
-      <div>Add Svelte UX package</div>
-      <Code source={`npm install svelte-ux`} language="sh" />
-    {/if}
-
-    {#if selectedTab === 'svelte-cli' || selectedTab === 'manual'}
-      <div>Update <code>tailwind.config.cjs</code></div>
-      <Code
-        source={`const colors = require('tailwindcss/colors');
+    <ul class="mt-0">
+      <li>
+        Svelte UX 1.0.0 requires Tailwind 3. For new projects, Svelte CLI <code>sv</code> installs
+        Tailwind 4 which can not be used. Instead you will need to follow the
+        <a href="https://v3.tailwindcss.com/docs/guides/sveltekit" target="_blank">official guide</a
+        >
+        to setup your project.
+      </li>
+      <li>
+        The upcoming Svelte UX 2.0.0 release has been updated to Tailwind 4 and can be previewed
+        <a href="https://next.svelte-ux.techniq.dev/" target="_blank">here</a>.
+      </li>
+      <li>Svelte UX 1.0.0 supports Svelte 3-5, while 2.0.0 will require Svelte 5.</li>
+    </ul>
+    <div>Add Svelte UX package</div>
+    <Code source={`npm install svelte-ux`} language="sh" />
+
+    <div>Update <code>tailwind.config.cjs</code></div>
+    <Code
+      source={`const colors = require('tailwindcss/colors');
 const layerstack = require('@layerstack/tailwind/plugin');
 
 module.exports = {
@@ -87,13 +66,11 @@ module.exports = {
     layerstack,  // uses hsl() color space by default. To use oklch(), use: layerstack({ colorSpace: 'oklch' }),
   ]
 };`}
-        language="js"
-      />
-    {/if}
+      language="js"
+    />
   </div>
 
   <p>A few notes regarding the <code>tailwind.config.cjs</code></p>
-
   <ul>
     <li>
       <code>{`./node_modules/svelte-ux/**/*.{(svelte, js)}`}</code> adds the library classes via

shell.nix

@@ -0,0 +1,8 @@
+{ pkgs ? import <nixpkgs> {} }:  
+  
+pkgs.mkShell {  
+  buildInputs = with pkgs; [  
+    nodejs
+    pnpm  
+  ];  
+}