#8 remove tailwind clamp and fix tailwind load issue

Author: DavidBlaa

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -26,7 +26,6 @@
     "@sveltejs/kit": "^1.5.0",
     "@sveltejs/package": "^2.0.2",
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",

package.json

@@ -9,7 +9,7 @@
  </script>
 
  <div class="px-5 grid gap-5" >
-  <h1>{title}</h1>
+  <h1 class="h1">{title}</h1>
   {#if note}
     <blockquote class="blockquote">{note}</blockquote>
   {/if}

src/lib/components/page/Page.svelte

@@ -20,7 +20,7 @@
  // import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
  import '$lib/css/themes/theme-bexis2.css';
 	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import '@skeletonlabs/skeleton/styles/all.css';
+	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
 	
@@ -29,7 +29,7 @@
 <AppShell
 	slotSidebarLeft="flex-none overflow-x-hidden overflow-y-auto bg-surface-50-900-token lg:w-auto"
 >
-	<svelte:fragment slot="header">Header</svelte:fragment>
+	<!-- <svelte:fragment slot="header">Header</svelte:fragment> -->
 	<svelte:fragment slot="sidebarLeft">
 		<Navigation />
 	</svelte:fragment>
@@ -38,5 +38,5 @@
 	<slot />
 	<!-- ---- / ---- -->
 	<!-- (pageFooter) -->
-	<svelte:fragment slot="footer">Footer</svelte:fragment>
+	<!-- <svelte:fragment slot="footer">Footer</svelte:fragment> -->
 </AppShell>

src/routes/+layout.svelte

@@ -1,9 +1,11 @@
-<div id="toc-target">
-	<h1 id="topic">BEXIS2 Core UI Documentation</h1>
-	<h2 id="test1">test1</h2>
-	<h3 id="test2">test2</h3>
-	<h2 id="test4">test4</h2>
-</div>
+<script>
+	import Page from "$lib/components/page/Page.svelte";
 
+</script>
 
-<input class="input variant-form-material">
+<Page title="BEXIS2 Core UI Documentation" note="test">
+
+
+<br/>
+<input type="text" class="input variant-form-material">
+</Page>

src/routes/+page.svelte

@@ -13,13 +13,13 @@ $:colorNames = ["primary", "secondary","tertiary","success","warning","error","s
 {#each colorNames as colorName}
 
 <!-- hack to load colors-->
-<div class="bg-primary-50 bg-primary-100 bg-primary-200 bg-primary-300 bg-primary-400 bg-primary-500 bg-primary-600 bg-primary-700 bg-primary-800 bg-primary-900 hidden">test</div>
+<!-- <div class="bg-primary-50 bg-primary-100 bg-primary-200 bg-primary-300 bg-primary-400 bg-primary-500 bg-primary-600 bg-primary-700 bg-primary-800 bg-primary-900 hidden">test</div>
 <div class="bg-secondary-50 bg-secondary-100 bg-secondary-200 bg-secondary-300 bg-secondary-400 bg-secondary-500 bg-secondary-600 bg-secondary-700 bg-secondary-800 bg-secondary-900 hidden">test</div>
 <div class="bg-tertiary-50 bg-tertiary-100 bg-tertiary-200 bg-tertiary-300 bg-tertiary-400 bg-tertiary-500 bg-tertiary-600 bg-tertiary-700 bg-tertiary-800 bg-tertiary-900 hidden">test</div>
 <div class="bg-success-50 bg-success-100 bg-success-200 bg-success-300 bg-success-400 bg-success-500 bg-success-600 bg-success-700 bg-success-800 bg-success-900 hidden">test</div>
 <div class="bg-warning-50 bg-warning-100 bg-warning-200 bg-warning-300 bg-warning-400 bg-warning-500 bg-warning-600 bg-warning-700 bg-warning-800 bg-warning-900 hidden">test</div>
 <div class="bg-error-50 bg-error-100 bg-error-200 bg-error-300 bg-error-400 bg-error-500 bg-error-600 bg-error-700 bg-error-800 bg-error-900 hidden">test</div>
-<div class="bg-surface-50 bg-surface-100 bg-surface-200 bg-surface-300 bg-surface-400 bg-surface-500 bg-surface-600 bg-surface-700 bg-surface-800 bg-surface-900 hidden">test</div>
+<div class="bg-surface-50 bg-surface-100 bg-surface-200 bg-surface-300 bg-surface-400 bg-surface-500 bg-surface-600 bg-surface-700 bg-surface-800 bg-surface-900 hidden">test</div> -->
 
 <div class="py-2">
 <h3>{colorName}</h3>

src/routes/components/theme/+page.svelte

@@ -11,7 +11,6 @@ module.exports = {
 	plugins: [
 		require('@tailwindcss/forms'),
 		require('@tailwindcss/typography'),
-		require('@tailwindcss/line-clamp'),
-		...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()
+		...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')({intellisense:false})
 	]
 };