Merge pull request #186 from CriticalMoments/tailwind_4_dui_5

Tailwind v4 and DaisyUI v5 upgrades

package.json

@@ -18,14 +18,14 @@
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.8.1",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/typography": "^0.5.13",
     "@types/glob": "^8.1.0",
     "@types/html-to-text": "^9.0.4",
     "@types/jsdom": "^21.1.7",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.19.0",
-    "autoprefixer": "^10.4.15",
-    "daisyui": "^4.7.3",
+    "daisyui": "^5.0.0",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.45.1",
@@ -39,7 +39,7 @@
     "super-sitemap": "^0.15.1",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.5.0",
     "vite": "^5.4.8",
     "vitest": "^1.0.0"

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 }

src/app.css

@@ -1,6 +1,70 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@plugin '@tailwindcss/typography';
+@plugin "daisyui";
+
+@plugin "daisyui/theme" {
+  name: "saasstartertheme";
+  default: true; /* set as default */
+  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+  color-scheme: light; /* color of browser-provided UI */
+
+  --color-primary: #180042;
+  --color-primary-content: #fefbf6;
+  --color-secondary: #c7b9f8;
+  --color-secondary-content: oklch(95% 0 0);
+  --color-accent: #db2777;
+  --color-accent-content: #180042;
+  --color-neutral: #180042;
+  --color-neutral-content: #fefbf6;
+  --color-base-100: #fefbf6;
+  --color-base-200: #faedd6;
+  --color-base-300: oklch(92% 0.04 240);
+  --color-base-content: #180042;
+  --color-info: oklch(70% 0.2 220);
+  --color-info-content: oklch(98% 0.01 220);
+  --color-success: #37d399;
+  --color-success-content: oklch(98% 0.01 140);
+  --color-warning: oklch(80% 0.25 80);
+  --color-warning-content: oklch(20% 0.05 80);
+  --color-error: #f77272;
+  --color-error-content: oklch(98% 0.01 30);
+
+  /* border radius */
+  --radius-selector: 1rem;
+  --radius-field: 0.5rem;
+  --radius-box: 0.5rem;
+
+  /* base sizes */
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  /* border size */
+  --border: 1px;
+
+  /* effects */
+  --depth: 1;
+  --noise: 0;
+}
+
+/*
+  Tailwind CSS v4 Migration:
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 a {
   @apply cursor-pointer;

src/routes/(admin)/account/(menu)/+page.svelte

@@ -40,7 +40,7 @@
 
 <div class="my-6">
   <h1 class="text-xl font-bold mb-1">Users</h1>
-  <div class="stats shadow stats-vertical sm:stats-horizontal sm:w-[420px]">
+  <div class="stats shadow-sm stats-vertical sm:stats-horizontal sm:w-[420px]">
     <div class="stat place-items-center">
       <div class="stat-title">Downloads</div>
       <div class="stat-value">31K</div>
@@ -56,7 +56,7 @@
 </div>
 <div class="my-6">
   <h1 class="text-xl font-bold mb-1">Accounts</h1>
-  <div class="stats shadow stats-vertical sm:stats-horizontal sm:w-[420px]">
+  <div class="stats shadow-sm stats-vertical sm:stats-horizontal sm:w-[420px]">
     <div class="stat place-items-center">
       <div class="stat-title">New Registers</div>
       <div class="stat-value">1,200</div>
@@ -72,7 +72,7 @@
 </div>
 <div class="my-6">
   <h1 class="text-xl font-bold mb-1">Revenue</h1>
-  <div class="stats shadow stats-vertical sm:stats-horizontal sm:w-[420px]">
+  <div class="stats shadow-sm stats-vertical sm:stats-horizontal sm:w-[420px]">
     <div class="stat place-items-center">
       <div class="stat-title text-success">Revenue</div>
       <div class="stat-value text-success">$4200</div>

src/routes/(admin)/account/(menu)/settings/change_password/+page.svelte

@@ -80,7 +80,7 @@
   />
 {:else}
   <div
-    class="card p-6 pb-7 mt-8 max-w-xl flex flex-col md:flex-row shadow max-w-md"
+    class="card p-6 pb-7 mt-8 max-w-xl flex flex-col md:flex-row shadow-sm max-w-md"
   >
     <div class="flex flex-col gap-y-4">
       {#if usingOAuth}

src/routes/(admin)/account/(menu)/settings/settings_module.svelte

@@ -63,7 +63,7 @@
   }
 </script>
 
-<div class="card p-6 pb-7 mt-8 max-w-xl flex flex-col md:flex-row shadow">
+<div class="card p-6 pb-7 mt-8 max-w-xl flex flex-col md:flex-row shadow-sm">
   {#if title}
     <div class="text-xl font-bold mb-3 w-48 md:pr-8 flex-none">{title}</div>
   {/if}

src/routes/(marketing)/+layout.svelte

@@ -60,7 +60,7 @@
       <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <ul
         tabindex="0"
-        class="menu menu-lg dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 font-bold"
+        class="menu menu-lg dropdown-content mt-3 z-1 p-2 shadow-sm bg-base-100 rounded-box w-52 font-bold"
       >
         <li><a href="/blog">Blog</a></li>
         <li><a href="/pricing">Pricing</a></li>
@@ -82,11 +82,11 @@
 </div>
 
 <!-- Spacer grows so the footer can be at bottom on short pages -->
-<div class="flex-grow"></div>
+<div class="grow"></div>
 <div class="">
   <div class="border-t max-w-[1000px] mx-auto"></div>
   <footer
-    class="footer p-10 gap-x-48 lg:gap-x-64 xl:gap-x-96 place-content-center text-base"
+    class="footer md:footer-horizontal p-10 gap-x-48 lg:gap-x-64 xl:gap-x-96 place-content-center text-base"
   >
     <nav>
       <span class="footer-title opacity-80">Explore</span>

src/routes/(marketing)/+page.svelte

@@ -233,7 +233,7 @@
   <div class="hero-content text-center py-12">
     <div class="max-w-xl">
       <div
-        class="text-xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent mb-3 md:mb-7 pb-1"
+        class="text-xl md:text-3xl font-bold bg-clip-text text-transparent bg-linear-to-r from-primary to-accent mb-3 md:mb-7 pb-1"
       >
         SaaS Starter Demo
       </div>
@@ -281,15 +281,16 @@
           target="_blank">Postgres</a
         >
       </div>
-      <div class="mt-6 md:mt-2">
+      <div
+        class="mt-6 md:mt-4 flex flex-row flex-wrap gap-4 place-content-center"
+      >
         <a href="https://github.com/CriticalMoments/CMSaasStarter">
-          <button class="btn btn-primary btn-sm px-6">★ us on Github</button>
+          <button class="btn btn-primary px-6">★ us on Github</button>
         </a>
         <a
           href="https://github.com/CriticalMoments/CMSaasStarter/tree/main#saas-starter"
         >
-          <button class="btn btn-outline btn-primary btn-sm px-6 mt-3 mx-2"
-            >Read the Docs</button
+          <button class="btn btn-outline btn-primary px-6">Read the Docs</button
           >
         </a>
       </div>
@@ -300,7 +301,7 @@
   <div class="pt-20 pb-8 px-7">
     <div class="max-w-lg mx-auto text-center">
       <div
-        class="text-3xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent pb-2"
+        class="text-3xl md:text-5xl font-bold bg-clip-text text-transparent bg-linear-to-r from-primary to-accent pb-2"
       >
         Explore the Features
       </div>
@@ -361,7 +362,7 @@
   <div class="hero-content text-center pb-16 pt-4 px-4">
     <div class="max-w-lg">
       <div
-        class="text-3xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent mt-4 pb-2"
+        class="text-3xl md:text-5xl font-bold bg-clip-text text-transparent bg-linear-to-r from-primary to-accent mt-4 pb-2"
       >
         See it in Action
       </div>
@@ -379,7 +380,7 @@
               <div class="flex justify-center">
                 <img
                   alt="Screenshot of criticalmoments.io homepage"
-                  class="aspect-[2044/1242]"
+                  class="aspect-2044/1242"
                   src="/images/example-home.png"
                 />
               </div>
@@ -391,7 +392,7 @@
             <div class="card shadow-xl border overflow-hidden">
               <img
                 alt="Screenshot of criticalmoments.io homepage"
-                class="aspect-[2044/1242]"
+                class="aspect-2044/1242"
                 src="/images/example-home.png"
               />
             </div></a

src/routes/(marketing)/blog/(posts)/how_we_built_our_41kb_saas_website/+page.svelte

@@ -17,8 +17,9 @@
 <a
   href="https://criticalmoments.io/blog/how_we_built_our_marketing_page"
   target="_blank"
-  class="btn btn-primary">Read the Blog Post</a
 >
+  <button class="btn btn-primary">Read the Blog Post</button>
+</a>
 
 <p>
   The blog post is over on <a href="https://criticalmoments.io" target="_blank"

src/routes/(marketing)/blog/+page.svelte

@@ -12,7 +12,7 @@
     class="text-3xl lg:text-5xl font-medium text-primary flex gap-3 items-baseline text-center place-content-center"
   >
     <div
-      class="text-center leading-relaxed font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent"
+      class="text-center leading-relaxed font-bold bg-clip-text text-transparent bg-linear-to-r from-primary to-accent"
     >
       {blogInfo.name}
     </div>

src/routes/(marketing)/contact_us/+page.svelte

@@ -95,7 +95,7 @@
   </div>
 
   <div
-    class="flex flex-col flex-grow m-4 lg:ml-10 min-w-[300px] stdphone:min-w-[360px] max-w-[400px] place-content-center lg:min-h-[70vh]"
+    class="flex flex-col grow m-4 lg:ml-10 min-w-[300px] stdphone:min-w-[360px] max-w-[400px] place-content-center lg:min-h-[70vh]"
   >
     {#if showSuccess}
       <div class="flex flex-col place-content-center lg:min-h-[70vh]">
@@ -119,7 +119,7 @@
               <div class="flex flex-row">
                 <div class="text-base font-bold">{field.label}</div>
                 {#if errors[field.id]}
-                  <div class="text-red-600 flex-grow text-sm ml-2 text-right">
+                  <div class="text-red-600 grow text-sm ml-2 text-right">
                     {errors[field.id]}
                   </div>
                 {/if}

src/routes/(marketing)/pricing/+page.svelte

@@ -150,7 +150,7 @@
     <div class="overflow-visible mx-auto max-w-xl mt-4">
       <table class="table">
         <thead
-          class="text-lg sticky top-0 bg-base-100 bg-opacity-50 z-10 backdrop-blur"
+          class="text-lg sticky top-0 bg-base-100 bg-opacity-50 z-10 backdrop-blur-sm"
         >
           <tr>
             <th></th>

src/routes/(marketing)/pricing/pricing_module.svelte

@@ -26,7 +26,7 @@
     <div
       class="flex-none card card-bordered {plan.id === highlightedPlanId
         ? 'border-primary'
-        : 'border-gray-200'} shadow-xl flex-1 flex-grow min-w-[260px] max-w-[310px] p-6"
+        : 'border-gray-200'} shadow-xl flex-1 grow min-w-[260px] max-w-[310px] p-6"
     >
       <div class="flex flex-col h-full">
         <div class="text-xl font-bold">{plan.name}</div>

src/routes/(marketing)/search/+page.svelte

@@ -96,16 +96,16 @@
     class="text-3xl lg:text-5xl font-medium text-primary flex gap-3 items-baseline text-center place-content-center"
   >
     <div
-      class="text-center leading-relaxed font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent"
+      class="text-center leading-relaxed font-bold bg-clip-text text-transparent bg-linear-to-r from-primary to-accent"
     >
       Search
     </div>
   </div>
-  <label class="input input-bordered flex items-center gap-2 mt-10">
+  <label class="input input-bordered flex items-center gap-2 mt-10 mb-5 w-full">
     <input
       id="search-input"
       type="text"
-      class="grow"
+      class="grow w-full"
       placeholder="Search"
       bind:value={searchQuery}
       onfocus={() => (focusItem = 0)}
@@ -138,7 +138,7 @@
       <a
         href={result.item.path || "/"}
         id="search-result-{i + 1}"
-        class="card my-6 bg-white shadow-xl flex-row overflow-hidden focus:border"
+        class="card my-6 bg-white shadow-xl flex-row overflow-hidden focus:mx-[-10px] focus:my-[-5px] focus:border-4 focus:border-secondary"
       >
         <div class="flex-none w-6 md:w-32 bg-secondary"></div>
         <div class="py-6 px-6">