NOT FULLY WORKING YET. Still working to upgrade fully to Tailwind CSS v4.

package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.28.1",
-    "@skeletonlabs/skeleton": "^2.0.0",
+    "@skeletonlabs/skeleton": "^3.1.0",
     "@skeletonlabs/tw-plugin": "^0.4.0",
     "@sveltejs/adapter-auto": "^6.0.0",
     "@sveltejs/adapter-node": "^5.0.0",
@@ -26,6 +26,7 @@
     "@sveltejs/kit": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/typography": "^0.5.10",
     "@tiptap/core": "^2.10.3",
     "@tiptap/extension-bubble-menu": "^2.10.3",
@@ -63,7 +64,7 @@
     "highlight.js": "^11.10.0",
     "lowlight": "^3.2.0",
     "mode-watcher": "^1.0.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.5.6",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
     "sass-embedded": "^1.81.0",
@@ -75,13 +76,12 @@
     "svelte-tiptap": "^2.1.0",
     "tailwind-merge": "^3.0.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.1.0",
     "tailwindcss-animate": "^1.0.7",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "typescript-svelte-plugin": "^0.3.47",
     "vite": "^6.0.0",
-    "vite-plugin-tailwind-purgecss": "^0.3.3",
     "vitest": "^3.0.0"
   },
   "type": "module",
@@ -108,10 +108,11 @@
     "codemirror": "^6.0.1",
     "dayjs": "^1.11.10",
     "dexie": "^4.0.0",
-    "flowbite-svelte": "^0.48.00",
+    "flowbite-svelte": "^1.7.0",
     "html5-qrcode": "^2.3.8",
     "lucide-svelte": "^0.517.0",
     "marked": "^15.0.7",
-    "shadcn-svelte": "^1.0.0"
+    "shadcn-svelte": "^1.0.0",
+    "svelte-persisted-store": "^0.12.0"
   }
 }

postcss.config.cjs

@@ -1,6 +1,7 @@
 module.exports = {
 	plugins: {
-		tailwindcss: {},
+		// tailwindcss: {},
+		'@tailwindcss/postcss': {},
 		autoprefixer: {},
 	},
 }

src/lib/ae_events_stores.ts

@@ -1,4 +1,5 @@
-import { localStorageStore } from '@skeletonlabs/skeleton';
+import { persisted } from 'svelte-persisted-store';
+// import { localStorageStore } from '@skeletonlabs/skeleton';
 import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 
@@ -288,7 +289,7 @@ let events_local_data_struct: key_val = {
 // export let ae_loc = writable(events_local_data_struct);
 
 // This works and uses *local* storage:
-export let events_loc: Writable<key_val> = localStorageStore('ae_events_loc', events_local_data_struct);
+export let events_loc: Writable<key_val> = persisted('ae_events_loc', events_local_data_struct);
 // console.log(`AE Stores - App Local Storage Data:`, get(ae_loc));
 
 
@@ -557,7 +558,7 @@ let events_slct_obj_template: key_val = {
 export let events_slct = writable(events_slct_obj_template);
 
 // This works and uses *local* storage:
-// export let events_slct: Writable<key_val> = localStorageStore('ae_events_slct', events_slct_obj_template);
+// export let events_slct: Writable<key_val> = persisted('ae_events_slct', events_slct_obj_template);
 
 
 /* *** BEGIN *** Initialize events_trigger */

src/lib/ae_idaa_stores.ts

@@ -1,4 +1,5 @@
-import { localStorageStore } from '@skeletonlabs/skeleton';
+import { persisted } from 'svelte-persisted-store';
+// import { localStorageStore } from '@skeletonlabs/skeleton';
 import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 
@@ -86,7 +87,7 @@ let idaa_local_data_struct: key_val = {
 // export let ae_loc = writable(idaa_local_data_struct);
 
 // This works and uses *local* storage:
-export let idaa_loc: Writable<key_val> = localStorageStore('ae_idaa_loc', idaa_local_data_struct);
+export let idaa_loc: Writable<key_val> = persisted('ae_idaa_loc', idaa_local_data_struct);
 // console.log(`AE Stores - App Local Storage Data:`, get(ae_loc));
 
 
@@ -152,7 +153,7 @@ let idaa_slct_obj_template: key_val = {
 export let idaa_slct = writable(idaa_slct_obj_template);
 
 // This works and uses *local* storage:
-// export let idaa_slct: Writable<key_val> = localStorageStore('ae_idaa_slct', idaa_slct_obj_template);
+// export let idaa_slct: Writable<key_val> = persisted('ae_idaa_slct', idaa_slct_obj_template);
 
 
 /* *** BEGIN *** Initialize idaa_trig */

src/lib/ae_journals/ae_journals_stores.ts

@@ -1,4 +1,5 @@
-import { localStorageStore } from '@skeletonlabs/skeleton';
+import { persisted } from 'svelte-persisted-store';
+// import { localStorageStore } from '@skeletonlabs/skeleton';
 import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 
@@ -53,7 +54,7 @@ let journals_local_data_struct: key_val = {
 // console.log(`AE Stores - App Journals Local Storage Data:`, journals_local_data_struct);
 
 // This works and uses *local* storage:
-export let journals_loc: Writable<key_val> = localStorageStore('ae_journals_loc', journals_local_data_struct);
+export let journals_loc: Writable<key_val> = persisted('ae_journals_loc', journals_local_data_struct);
 // console.log(`AE Stores - App Local Storage Data:`, get(ae_loc));
 
 

src/lib/ae_stores.ts

@@ -1,4 +1,5 @@
-import { localStorageStore } from '@skeletonlabs/skeleton';
+import { persisted } from 'svelte-persisted-store';
+// import { localStorageStore } from '@skeletonlabs/skeleton';
 import { readable, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 
@@ -297,7 +298,7 @@ const ae_app_local_data_defaults: key_val = {
 // export let ae_loc = writable(ae_app_local_data_struct);
 
 // This works and uses local storage:
-export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_data_defaults);
+export let ae_loc: Writable<key_val> = persisted('ae_loc', ae_app_local_data_defaults);
 // console.log(`AE Stores - App Local Storage Data:`, get(ae_loc));
 
 
@@ -462,7 +463,7 @@ let slct_obj_template: key_val = {
 export let slct = writable(slct_obj_template);
 
 // This works and uses *local* storage:
-// export let slct: Writable<key_val> = localStorageStore('ae_slct', slct_obj_template);
+// export let slct: Writable<key_val> = persisted('ae_slct', slct_obj_template);
 
 
 /* *** BEGIN *** Initialize slct_trigger */

src/lib/e_app_cfg.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { onMount } from 'svelte';
-import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
+// import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
 
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
@@ -128,7 +128,7 @@ function handle_clear_storage(item: null|string) {
 <section class="space-y-2">
 <div>
     <h2 class="strong">Access Type:</h2>
-<div>
+</div>
 {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
     {#if $ae_loc.access_type == 'super'}
         <span class="fas fa-secret mx-1"></span> Super Access

src/lib/element_data_store.svelte

@@ -72,7 +72,7 @@ if (browser && localStorage.getItem(`ae_ds__${ds_code}`)) {
     ae_ds_tmp = ds_code_obj;
 }
 
-//  Writable<key_val> = localStorageStore(`ae_ds__${ds_code}`, ds_code_obj);
+//  Writable<key_val> = persisted(`ae_ds__${ds_code}`, ds_code_obj);
 // console.log(`ae_e_data_store cached: ${ds_code} = `, ae_ds_tmp);
 console.log(`ae_e_data_store cached: ${ds_code} account_id=${$ae_loc.account_id}`);
 

src/routes/+layout.svelte

@@ -11,9 +11,9 @@ import { goto, invalidateAll } from '$app/navigation';
 import '../app.postcss';
 
 // *** Import other supporting libraries
-import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
+// import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
 // Initialize the stores for Drawer, Modal, and Toast so they work throughout the app.
-initializeStores();
+// initializeStores();
 // import { Modal } from '@skeletonlabs/skeleton';
 // import type {
 //     ModalComponent
@@ -43,7 +43,7 @@ import hljs from 'highlight.js/lib/core';
 import 'highlight.js/styles/github-dark.css';
 
 import { browser } from '$app/environment';
-import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
+// import { storeHighlightJs } from '@skeletonlabs/skeleton';
 import xml from 'highlight.js/lib/languages/xml'; // for HTML
 import css from 'highlight.js/lib/languages/css';
 import javascript from 'highlight.js/lib/languages/javascript';
@@ -53,7 +53,7 @@ hljs.registerLanguage('xml', xml); // for HTML
 hljs.registerLanguage('css', css);
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('typescript', typescript);
-storeHighlightJs.set(hljs);
+// storeHighlightJs.set(hljs);
 
 // *** Import Aether specific variables and functions
 import Analytics from '$lib/analytics.svelte'

src/routes/admin/+layout.svelte

@@ -4,8 +4,8 @@ export let data: any;
 
 import { goto } from '$app/navigation';
 import { onMount } from 'svelte';
-import type { Writable } from 'svelte/store';
-import { localStorageStore } from '@skeletonlabs/skeleton';
+// import type { Writable } from 'svelte/store';
+// import { localStorageStore } from '@skeletonlabs/skeleton';
 
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';

src/routes/core/+page.svelte

@@ -6,8 +6,6 @@ export let data: any;
 // import { onMount } from 'svelte';
 import { goto, invalidate, pushState, replaceState } from '$app/navigation';
 
-// import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
-
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';
 // import { api } from '$lib/api';

src/routes/events_leads/exhibit/[slug]/+page.svelte

@@ -6,7 +6,7 @@ export let data: any;
 import { onMount } from 'svelte';
 import { goto, invalidate, pushState, replaceState } from '$app/navigation';
 
-import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
+import { clipboard, TabGroup, Tab } from '@skeletonlabs/skeleton';
 
 import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_view.svelte

@@ -203,7 +203,8 @@ onDestroy(() => {
             </div>
         {:else if ($lq__post_obj?.full_name)}
         <div class="post__posted_by">
-            Posted by: <span class="fas fa-user"></span> <span class="post__full_name">{$lq__post_obj?.full_name}
+            Posted by: <span class="fas fa-user"></span>
+            <span class="post__full_name">{$lq__post_obj?.full_name}</span>
             {#if $ae_loc.trusted_access && $lq__post_obj?.email}
                 <a href="mailto:{$lq__post_obj?.email}?subject=IDAA BB Post">{$lq__post_obj?.email}</a>
             {/if}

src/routes/sponsorships/+layout.svelte

@@ -3,7 +3,7 @@
 export let data: any;
 
 import { onMount } from 'svelte';
-import { localStorageStore } from '@skeletonlabs/skeleton';
+// import { localStorageStore } from '@skeletonlabs/skeleton';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
 // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.

vite.config.ts

@@ -1,13 +1,8 @@
-import { purgeCss } from 'vite-plugin-tailwind-purgecss';
+// import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit(), purgeCss({
-			safelist: {
-				// any selectors that begin with "hljs-" will not be purged
-				greedy: [/^hljs-/],
-			},
-		}),
+	plugins: [sveltekit(),
 	],
 });