update tailwind v4, remove sass and postcss dependency

assets/css/base.css

@@ -55,5 +55,5 @@ code {
 }
 
 blockquote > p {
-  @apply my-0 #{!important};
+  @apply my-0!;
 }

assets/css/components.css

@@ -0,0 +1,54 @@
+/* section style */
+.section {
+  @apply py-24 xl:py-28;
+}
+
+.section-sm {
+  @apply py-16 xl:py-20;
+}
+
+/* container */
+.container {
+  @apply mx-auto max-w-[1320px] px-4;
+}
+
+/* social icons */
+.social-icons {
+  @apply space-x-4;
+}
+.social-icons li {
+  @apply inline-block;
+}
+.social-icons li a {
+  @apply flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-center leading-9 text-white dark:bg-darkmode-primary dark:text-dark;
+}
+.social-icons li a svg {
+  @apply h-5 w-5;
+}
+
+/* content style */
+.content {
+  @apply prose max-w-none;
+  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark dark:prose-headings:text-darkmode-dark;
+  @apply prose-h1:text-h1-sm md:prose-h1:text-h1;
+  @apply prose-h2:text-h2-sm md:prose-h2:text-h2;
+  @apply prose-h3:text-h3-sm md:prose-h3:text-h3;
+  @apply prose-img:max-w-full prose-img:rounded;
+  @apply prose-hr:border-border dark:prose-hr:border-darkmode-border;
+  @apply prose-p:text-base prose-p:text-text dark:prose-p:text-darkmode-text;
+  @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark dark:prose-blockquote:border-darkmode-primary dark:prose-blockquote:bg-darkmode-theme-light dark:prose-blockquote:text-darkmode-light;
+  @apply prose-pre:rounded-lg prose-pre:bg-theme-light dark:prose-pre:bg-darkmode-theme-light;
+  @apply prose-code:px-1 prose-code:text-primary dark:prose-code:text-darkmode-primary;
+  @apply prose-strong:text-dark dark:prose-strong:text-darkmode-text;
+  @apply prose-a:text-text prose-a:underline prose-a:hover:text-primary dark:prose-a:text-darkmode-text dark:prose-a:hover:text-darkmode-primary;
+  @apply prose-li:text-text dark:prose-li:text-darkmode-text;
+  @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] dark:prose-table:before:border-darkmode-border;
+  @apply prose-thead:border-border prose-thead:bg-theme-light dark:prose-thead:border-darkmode-border dark:prose-thead:bg-darkmode-theme-light;
+  @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark dark:prose-th:text-darkmode-text;
+  @apply prose-tr:border-border dark:prose-tr:border-darkmode-border;
+  @apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] dark:prose-td:text-darkmode-text;
+}
+
+.content .btn {
+  @apply dark:hover:text-dark no-underline hover:!text-white;
+}

assets/css/custom.css

@@ -0,0 +1,2 @@
+/* DO NOT WRITE ANY STYLE IN THIS FILE */
+/* If you want to add your own styles, please write it in the `./assets/css/custom.css` file. */

assets/css/main.css

@@ -0,0 +1,37 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+@plugin "./tailwind-plugin/tw-theme";
+@plugin "./tailwind-plugin/tw-bs-grid";
+@source "hugo_stats.json";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@import "./safe.css";
+
+@layer base {
+  @import "./base.css";
+}
+
+@layer components {
+  @import "./components.css";
+  @import "./navigation.css";
+  @import "./buttons.css";
+}
+
+@layer utilities {
+  @import "./utilities.css";
+}
+
+@import "search.css";
+@import "social-share.css";
+@import "gallery-slider.css";
+@import "images.css";
+@import "toc.css";
+@import "tab.css";
+@import "accordion.css";
+@import "modal.css";
+@import "notice.css";
+
+@import "module-overrides.css";
+@import "custom.css";

assets/css/module-overrides.css

@@ -0,0 +1,54 @@
+/* table of contents */
+.table-of-content {
+  @apply overflow-hidden rounded;
+}
+
+/* share icons */
+.share-icons .share-link {
+  @apply h-9 w-9 rounded leading-9 bg-primary hover:bg-primary dark:bg-darkmode-primary dark:hover:bg-darkmode-primary;
+}
+
+.share-icons .share-icon svg {
+  @apply dark:fill-dark;
+}
+
+/* notice */
+.notice {
+  @apply rounded-lg;
+}
+
+/* tab */
+.tab {
+  @apply border-border dark:border-darkmode-border overflow-hidden rounded-lg border;
+}
+.tab-nav {
+  @apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light pl-4;
+}
+.tab-nav-item {
+  @apply text-dark dark:text-darkmode-dark px-8 !text-lg;
+}
+.tab-nav-item.active {
+  @apply border-dark dark:border-darkmode-primary;
+}
+
+.tab-content-panel {
+  @apply px-4 !pt-0;
+}
+
+/* accordion */
+.accordion {
+  @apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light mb-6 overflow-hidden rounded-lg border;
+}
+.accordion-header {
+  @apply text-dark dark:text-darkmode-dark;
+}
+
+/* cookie consent */
+.cookie-box {
+  @apply !rounded-lg;
+}
+
+/* slider */
+.gallery-slider {
+  @apply !ml-0;
+}

assets/css/navigation.css

@@ -1,21 +1,8 @@
-// navbar toggler
-input#nav-toggle:checked + label #show-button {
-  @apply hidden;
-}
-
-input#nav-toggle:checked + label #hide-button {
-  @apply block;
-}
-
-input#nav-toggle:checked ~ #nav-menu {
-  @apply block;
-}
-
 .header {
   @apply bg-body dark:bg-darkmode-body py-6;
 }
 
-// navbar items
+/* navbar items */
 .navbar {
   @apply relative flex flex-wrap items-center justify-between;
 }
@@ -31,24 +18,20 @@ input#nav-toggle:checked ~ #nav-menu {
   @apply text-center lg:text-left;
 }
 
-// .nav-item {
-//   @apply mx-3;
-// }
-
 .nav-link {
   @apply text-dark hover:text-primary dark:text-darkmode-dark dark:hover:text-darkmode-primary block p-3 cursor-pointer font-semibold transition lg:px-2 lg:py-3;
 }
 
 .nav-dropdown {
   @apply mr-0;
-  & > svg {
+}
+
+.nav-dropdown > svg {
   @apply pointer-events-none;
-  }
+}
-  &.active {
+
-    .nav-dropdown-list {
+.nav-dropdown.active .nav-dropdown-list {
   @apply block;
-    }
-  }
 }
 
 .nav-dropdown-list {
@@ -63,7 +46,7 @@ input#nav-toggle:checked ~ #nav-menu {
   @apply text-dark hover:text-primary dark:text-darkmode-text dark:hover:text-darkmode-primary block py-1 font-semibold transition;
 }
 
-//theme-switcher
+/* theme-switcher */
 .theme-switcher {
   @apply inline-flex;
 

assets/css/safe.css

@@ -0,0 +1,8 @@
+/* swiper pagination */
+.swiper-pagination-bullet {
+  @apply !h-2.5 !w-2.5 !bg-theme-light !opacity-100 dark:!bg-darkmode-theme-light;
+}
+
+.swiper-pagination-bullet-active {
+  @apply !h-4 !w-4 !bg-primary dark:!bg-darkmode-primary;
+}

assets/css/utilities.css

@@ -0,0 +1,29 @@
+/* navbar toggler */
+input#nav-toggle:checked + label #show-button {
+  @apply hidden;
+}
+
+input#nav-toggle:checked + label #hide-button {
+  @apply block;
+}
+
+input#nav-toggle:checked ~ #nav-menu {
+  @apply block;
+}
+
+.bg-gradient {
+  @apply bg-linear-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%] dark:from-darkmode-theme-light dark:to-darkmode-body;
+}
+
+.shadow {
+  @apply shadow-[0px_4px_40px_rgba(0,0,0,0.05)];
+}
+
+/* form style */
+.form-input {
+  @apply w-full rounded border-transparent bg-theme-light px-6 py-4 text-dark placeholder:text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-theme-light dark:text-darkmode-light;
+}
+
+.form-label {
+  @apply mb-4 block font-secondary text-xl font-normal text-dark dark:text-darkmode-light;
+}

assets/js/main.js

@@ -10,7 +10,7 @@
 
   dropdownMenuToggler.forEach((toggler) => {
     toggler?.addEventListener("click", (e) => {
-      e.target.closest('.nav-item').classList.toggle("active");
+      e.target.closest(".nav-item").classList.toggle("active");
     });
   });
 

assets/scss/components.scss

@@ -1,74 +0,0 @@
-main {
-  min-height: 70vh;
-}
-
-// section style
-.section {
-  @apply py-24 xl:py-28;
-  &-sm {
-    @apply py-16 xl:py-20;
-  }
-}
-
-// container
-.container {
-  @apply mx-auto px-4 2xl:max-w-[1320px];
-}
-
-// form style
-.form-input {
-  @apply bg-theme-light text-dark placeholder:text-light focus:border-primary dark:border-darkmode-border dark:bg-darkmode-theme-light dark:text-darkmode-light w-full rounded border-transparent px-6 py-4 focus:ring-transparent;
-}
-
-.form-label {
-  @apply font-secondary text-dark dark:text-darkmode-light mb-4 block text-xl font-normal;
-}
-
-// social icons
-.social-icons {
-  @apply space-x-4;
-  li {
-    @apply inline-block;
-    a {
-      @apply bg-primary dark:bg-darkmode-primary dark:text-dark flex h-9 w-9 items-center justify-center rounded text-center leading-9 text-white;
-      svg {
-        @apply h-5 w-5;
-      }
-    }
-  }
-}
-
-// swiper pagination
-.swiper-pagination-bullet {
-  @apply bg-theme-light dark:bg-darkmode-theme-light h-2.5 w-2.5 opacity-100 mx-1.5 #{!important};
-
-  &-active {
-    @apply bg-primary dark:bg-darkmode-primary h-4 w-4 #{!important};
-  }
-}
-
-// content style
-.content {
-  @apply prose max-w-none;
-  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark prose-headings:dark:text-darkmode-dark;
-  @apply prose-h1:text-h1-sm md:prose-h1:text-h1;
-  @apply prose-h2:text-h2-sm md:prose-h2:text-h2;
-  @apply prose-h3:text-h3-sm md:prose-h3:text-h3;
-  @apply prose-img:max-w-full prose-img:rounded;
-  @apply prose-hr:border-border prose-hr:dark:border-darkmode-border;
-  @apply prose-p:text-base prose-p:text-text prose-p:dark:text-darkmode-text;
-  @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
-  @apply prose-pre:rounded-lg prose-pre:bg-theme-light prose-pre:dark:bg-darkmode-theme-light;
-  @apply prose-code:px-1 prose-code:dark:text-darkmode-light;
-  @apply prose-strong:text-dark prose-strong:dark:text-darkmode-text;
-  @apply prose-a:text-text prose-a:underline hover:prose-a:text-primary prose-a:dark:text-darkmode-text hover:prose-a:dark:text-darkmode-primary;
-  @apply prose-li:text-text prose-li:dark:text-darkmode-text;
-  @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] prose-table:before:dark:border-darkmode-border;
-  @apply prose-thead:border-border prose-thead:bg-theme-light prose-thead:dark:border-darkmode-border prose-thead:dark:bg-darkmode-theme-light;
-  @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark prose-th:dark:text-darkmode-text;
-  @apply prose-tr:border-border prose-tr:dark:border-darkmode-border;
-  @apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] prose-td:dark:text-darkmode-text;
-  .btn {
-    @apply dark:hover:text-dark no-underline hover:text-white #{!important};
-  }
-}

assets/scss/custom.scss

@@ -1,2 +0,0 @@
-// DO NOT WRITE ANY STYLE IN THIS FILE
-// If you want to add your own styles, please write it in the `./assets/scss/custom.scss` file.

assets/scss/main.scss

@@ -1,30 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  @import "base";
-}
-
-@layer components {
-  @import "components";
-  @import "navigation";
-  @import "buttons";
-}
-
-@layer utilities {
-  @import "utilities";
-}
-
-@import "search";
-@import "social-share";
-@import "gallery-slider";
-@import "images";
-@import "toc";
-@import "tab";
-@import "accordion";
-@import "modal";
-@import "notice";
-
-@import "module-overrides";
-@import "custom";

assets/scss/module-overrides.scss

@@ -1,58 +0,0 @@
-// table of contents
-.table-of-content {
-  @apply overflow-hidden rounded;
-}
-
-// share icons
-.share-icons {
-  .share-link {
-    @apply h-9 w-9 rounded leading-9;
-    @apply bg-primary hover:bg-primary dark:bg-darkmode-primary dark:hover:bg-darkmode-primary;
-  }
-  .share-icon svg {
-    @apply dark:fill-dark;
-  }
-}
-
-// notice
-.notice {
-  @apply rounded-lg;
-}
-
-// tab
-.tab {
-  @apply border-border dark:border-darkmode-border overflow-hidden rounded-lg border;
-  &-nav {
-    @apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light pl-4;
-
-    &-item {
-      @apply text-dark dark:text-darkmode-dark px-8 text-lg #{!important};
-      &.active {
-        @apply border-dark dark:border-darkmode-primary;
-      }
-    }
-  }
-  &-content {
-    &-panel {
-      @apply px-4 pt-0 #{!important};
-    }
-  }
-}
-
-// accordion
-.accordion {
-  @apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light mb-6 overflow-hidden rounded-lg border;
-  &-header {
-    @apply text-dark dark:text-darkmode-dark;
-  }
-}
-
-// cookie consent
-.cookie-box {
-  @apply rounded-lg #{!important};
-}
-
-// slider
-.gallery-slider {
-  @apply ml-0 #{!important};
-}

assets/scss/utilities.scss

@@ -1,20 +0,0 @@
-.bg-gradient {
-  @apply dark:from-darkmode-theme-light dark:to-darkmode-body bg-gradient-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%];
-}
-
-.rounded-sm {
-  @apply rounded-[4px];
-}
-.rounded {
-  @apply rounded-[6px];
-}
-.rounded-lg {
-  @apply rounded-[12px];
-}
-.rounded-xl {
-  @apply rounded-[16px];
-}
-
-.shadow {
-  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
-}

exampleSite/assets/css/custom.css

@@ -0,0 +1 @@
+/* Add your own custom styles here */

exampleSite/assets/scss/custom.scss

@@ -1 +0,0 @@
-// Add your own custom styles here

exampleSite/data/theme.json

@@ -9,7 +9,7 @@
         "theme_dark": ""
       },
       "text_color": {
-        "default": "#444444",
+        "text": "#444444",
         "dark": "#040404",
         "light": "#717171"
       }
@@ -23,7 +23,7 @@
         "theme_dark": ""
       },
       "text_color": {
-        "default": "#B4AFB6",
+        "text": "#B4AFB6",
         "dark": "#fff",
         "light": "#B4AFB6"
       }

exampleSite/go.mod

@@ -3,29 +3,29 @@ module hugoplate.netlify.app
 go 1.21
 
 require (
-	github.com/gethugothemes/hugo-modules/accordion v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/accordion v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/adsense v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/adsense v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/components/announcement v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/components/announcement v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/components/cookie-consent v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/components/cookie-consent v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/components/custom-script v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/components/custom-script v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/components/preloader v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/components/preloader v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/components/render-link v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/components/render-link v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/components/social-share v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/components/social-share v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/gallery-slider v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/gallery-slider v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/gzip-caching v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/gzip-caching v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/icons/font-awesome v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/icons/font-awesome v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/images v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/images v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/modal v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/modal v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/pwa v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/pwa v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/search v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/search v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/seo-tools/basic-seo v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/seo-tools/basic-seo v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/seo-tools/google-tag-manager v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/seo-tools/google-tag-manager v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/seo-tools/site-verifications v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/seo-tools/site-verifications v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/shortcodes/button v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/shortcodes/button v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/shortcodes/notice v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/shortcodes/notice v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/tab v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/tab v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20250213104422-d6c69545f20a // indirect
-	github.com/gethugothemes/hugo-modules/videos v0.0.0-20250112030311-a0de82520a5a // indirect
+	github.com/gethugothemes/hugo-modules/videos v0.0.0-20250213104422-d6c69545f20a // indirect
 	github.com/hugomods/mermaid v0.1.4 // indirect
-	github.com/zeon-studio/hugoplate v0.0.0-20250116040859-e767a2ce9068 // indirect
+	github.com/zeon-studio/hugoplate v0.0.0-20250205092428-3b220f635d99 // indirect
 )

exampleSite/hugo.toml

@@ -38,40 +38,23 @@ pagerSize = 10
 path = 'page'
 
 
-############################# Modules ############################
-[module]
-[[module.mounts]]
-source = "assets"
-target = "assets"
-
-[[module.mounts]]
-source = "hugo_stats.json"
-target = "assets/watching/hugo_stats.json"
-
 ############################# Build ##############################
 [build]
-noJSConfigInAssets = false
-useResourceCacheWhen = 'fallback'
 [build.buildStats]
 enable = true
 [[build.cachebusters]]
-source = 'assets/watching/hugo_stats\.json'
+source = 'assets/notwatching/hugo_stats\.json'
-target = 'style\.css'
-[[build.cachebusters]]
-source = '(postcss|tailwind)\.config\.js'
 target = 'css'
-[[build.cachebusters]]
+
-source = 'assets/.*\.(js|ts|jsx|tsx)'
+############################# Modules ############################
-target = 'js'
+[module]
-[[build.cachebusters]]
+[[module.mounts]]
-source = 'assets/.*\.(css|scss|sass)'
+source = 'assets'
-target = 'css'
+target = 'assets'
-[[build.cachebusters]]
+[[module.mounts]]
-source = 'data/.*\.(.*)$'
+disableWatch = true
-target = 'css'
+source = 'hugo_stats.json'
-[[build.cachebusters]]
+target = 'assets/notwatching/hugo_stats.json'
-source = 'assets/.*\.(.*)$'
-target = '$1'
 
 
 ############################# Outputs ############################

exampleSite/tailwind.config.js

@@ -1,103 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const themePath = path.join(__dirname, "data/theme.json");
-const themeRead = fs.readFileSync(themePath, "utf8");
-const theme = JSON.parse(themeRead);
-
-let font_base = Number(theme.fonts.font_size.base.replace("px", ""));
-let font_scale = Number(theme.fonts.font_size.scale);
-let h6 = font_scale;
-let h5 = h6 * font_scale;
-let h4 = h5 * font_scale;
-let h3 = h4 * font_scale;
-let h2 = h3 * font_scale;
-let h1 = h2 * font_scale;
-let fontPrimary, fontPrimaryType, fontSecondary, fontSecondaryType;
-if (theme.fonts.font_family.primary) {
-  fontPrimary = theme.fonts.font_family.primary
-    .replace(/\+/g, " ")
-    .replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
-  fontPrimaryType = theme.fonts.font_family.primary_type;
-}
-if (theme.fonts.font_family.secondary) {
-  fontSecondary = theme.fonts.font_family.secondary
-    .replace(/\+/g, " ")
-    .replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
-  fontSecondaryType = theme.fonts.font_family.secondary_type;
-}
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./hugo_stats.json"],
-  safelist: [{ pattern: /^swiper-/ }],
-  darkMode: "class",
-  theme: {
-    screens: {
-      sm: "540px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px",
-    },
-    container: {
-      center: true,
-      padding: "2rem",
-    },
-    extend: {
-      colors: {
-        text: theme.colors.default.text_color.default,
-        light: theme.colors.default.text_color.light,
-        dark: theme.colors.default.text_color.dark,
-        primary: theme.colors.default.theme_color.primary,
-        secondary: theme.colors.default.theme_color.secondary,
-        body: theme.colors.default.theme_color.body,
-        border: theme.colors.default.theme_color.border,
-        "theme-light": theme.colors.default.theme_color.theme_light,
-        "theme-dark": theme.colors.default.theme_color.theme_dark,
-        darkmode: {
-          text: theme.colors.darkmode.text_color.default,
-          light: theme.colors.darkmode.text_color.light,
-          dark: theme.colors.darkmode.text_color.dark,
-          primary: theme.colors.darkmode.theme_color.primary,
-          secondary: theme.colors.darkmode.theme_color.secondary,
-          body: theme.colors.darkmode.theme_color.body,
-          border: theme.colors.darkmode.theme_color.border,
-          "theme-light": theme.colors.darkmode.theme_color.theme_light,
-          "theme-dark": theme.colors.darkmode.theme_color.theme_dark,
-        },
-      },
-      fontSize: {
-        base: font_base + "px",
-        "base-sm": font_base * 0.8 + "px",
-        h1: h1 + "rem",
-        "h1-sm": h1 * 0.9 + "rem",
-        h2: h2 + "rem",
-        "h2-sm": h2 * 0.9 + "rem",
-        h3: h3 + "rem",
-        "h3-sm": h3 * 0.9 + "rem",
-        h4: h4 + "rem",
-        h5: h5 + "rem",
-        h6: h6 + "rem",
-      },
-      fontFamily: {
-        primary: [fontPrimary, fontPrimaryType],
-        secondary: [fontSecondary, fontSecondaryType],
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/typography"),
-    require("@tailwindcss/forms"),
-    require("tailwind-bootstrap-grid")({
-      generateContainer: false,
-      gridGutterWidth: "2rem",
-      gridGutters: {
-        1: "0.25rem",
-        2: "0.5rem",
-        3: "1rem",
-        4: "1.5rem",
-        5: "3rem",
-      },
-    }),
-  ],
-};

layouts/partials/essentials/header.html

@@ -111,10 +111,15 @@
         {{ if .enable }}
           <button
             aria-label="search"
-            {{ if and (not site.Params.navigation_button.enable) (not site.Params.theme_switcher)}}
+            {{ if and (not site.Params.navigation_button.enable) (not site.Params.theme_switcher) }}
-            class="border-border text-dark hover:text-primary dark:border-darkmode-border mr-5 inline-block border-r lg:border-r-0 pr-5 lg:pr-0 text-xl dark:text-white dark:hover:text-darkmode-primary"
+              class="border-border text-dark hover:text-primary
+              dark:border-darkmode-border mr-5 inline-block border-r
+              lg:border-r-0 pr-5 lg:pr-0 text-xl dark:text-white
+              dark:hover:text-darkmode-primary"
             {{ else }}
-            class="border-border text-dark hover:text-primary dark:border-darkmode-border mr-5 inline-block border-r pr-5 text-xl dark:text-white dark:hover:text-darkmode-primary"
+              class="border-border text-dark hover:text-primary
+              dark:border-darkmode-border mr-5 inline-block border-r pr-5
+              text-xl dark:text-white dark:hover:text-darkmode-primary"
             {{ end }}
             data-target="search-modal">
             <i class="fa-solid fa-search"></i>

layouts/partials/essentials/style.html

@@ -29,9 +29,10 @@
   })();
 </script>
 
-<!-- plugins + stylesheet -->
+<!-- main styles -->
 {{ $styles := slice }}
 {{ $stylesLazy := slice }}
+
 {{ range site.Params.plugins.css }}
   {{ if findRE "^http" .link }}
     <link
@@ -49,29 +50,28 @@
   {{ end }}
 {{ end }}
 
-{{/* main style */}}
+{{ $mainCSS := resources.Get "css/main.css" }}
-{{ $styles = $styles | append (resources.Get "scss/main.scss" | toCSS) }}
+{{ $tailwindOpts := dict "inlineImports" true }}
+{{ $tailwindCSS := $mainCSS | css.TailwindCSS $tailwindOpts }}
+
+{{ $styles = $styles | append $tailwindCSS }}
 {{ $styles = $styles | resources.Concat "css/style.css" }}
-{{ $styles = $styles | css.PostCSS }}
 
 {{ $stylesLazy = $stylesLazy | resources.Concat "css/style-lazy.css" }}
-{{ $stylesLazy = $stylesLazy | css.PostCSS }}
 
 {{ if hugo.IsProduction }}
-  {{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . | minify | fingerprint | resources.PostProcess }}
+  {{ $styles = $styles | minify | fingerprint }}
-  {{ $stylesLazy = $stylesLazy | resources.ExecuteAsTemplate "css/style-lazy.css" . | minify | fingerprint | resources.PostProcess }}
+  {{ $stylesLazy = $stylesLazy | minify | fingerprint }}
-{{ else }}
-  {{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . }}
-  {{ $stylesLazy = $stylesLazy | resources.ExecuteAsTemplate "css/style-lazy.css" . }}
 {{ end }}
 
-{{/* styles */}}
+
+<!-- link main style -->
 <link
   href="{{ $styles.RelPermalink }}"
   integrity="{{ $styles.Data.Integrity }}"
   rel="stylesheet" />
 
-{{/* styles lazy */}}
+<!-- link lazy style -->
 <link
   defer
   async

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hugoplate",
   "description": "hugo tailwindcss boilerplate",
-  "version": "1.19.0",
+  "version": "2.0.0",
   "license": "MIT",
   "author": "zeon.studio",
   "scripts": {
@@ -19,21 +19,12 @@
     "format": "prettier -w ."
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.0.6",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
-    "autoprefixer": "^10.4.20",
+    "prettier": "^3.5.0",
-    "postcss": "^8.5.1",
-    "postcss-cli": "^11.0.0",
-    "prettier": "^3.4.2",
     "prettier-plugin-go-template": "0.0.15",
-    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwind-bootstrap-grid": "^5.1.0",
+    "tailwindcss": "^4.0.6"
-    "tailwindcss": "^3.4.17"
-  },
-  "postcss": {
-    "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
-    }
   }
 }

readme.md

@@ -66,8 +66,6 @@ We have included almost everything you need to start your Hugo project. Let's se
 
 - [Hugo](https://gohugo.io/)
 - [Tailwind CSS](https://tailwindcss.com/)
-- [PostCSS](https://postcss.org/)
-- [PurgeCSS](https://purgecss.com/)
 - [AutoPrefixer](https://autoprefixer.github.io/)
 - [Hugo Modules](https://gohugo.io/hugo-modules/) by [Gethugothemes](https://gethugothemes.com/hugo-modules)
 - [Markdown](https://markdownguide.org/)
@@ -185,7 +183,7 @@ After you finish your development, you can build or deploy your project almost e
 
 ### 👉 Build Command
 
-To build your project locally, you can use the following command. It will purge all the unused CSS and minify all the files.
+To build your project locally, you can use the following command.
 
 ```bash
 npm run build

scripts/removeDarkmode.js

@@ -3,10 +3,6 @@ const path = require("path");
 
 const rootDirs = ["assets/scss", "layouts"];
 const configFiles = [
-  {
-    filePath: "exampleSite/tailwind.config.js",
-    patterns: ["darkmode:\\s*{[^}]*},", 'darkMode:\\s*"class",'],
-  },
   {
     filePath: "exampleSite/data/theme.json",
     patterns: ["colors.darkmode"],
@@ -75,13 +71,9 @@ function removeDarkModeFromPages(directoryPath) {
 
 function removeDarkMode(configFile) {
   const { filePath, patterns } = configFile;
-  if (filePath === "exampleSite/tailwind.config.js") {
-    removeDarkModeFromFiles(filePath, patterns);
-  } else {
   const contentFile = JSON.parse(fs.readFileSync(filePath, "utf8"));
   patterns.forEach((pattern) => deleteNestedProperty(contentFile, pattern));
   fs.writeFileSync(filePath, JSON.stringify(contentFile));
-  }
 }
 
 function deleteNestedProperty(obj, propertyPath) {

scripts/themeSetup.js

@@ -89,8 +89,6 @@ const setupTheme = () => {
     ].forEach(toggleComment);
 
     const includesFiles = [
-      "tailwind.config.js",
-      "postcss.config.js",
       "go.mod",
       "hugo.toml",
       "assets",

tailwind-plugin/tw-bs-grid.js

@@ -0,0 +1,109 @@
+import plugin from "tailwindcss/plugin";
+
+(function () {
+  "use strict";
+  module.exports = plugin.withOptions(() => {
+    return ({ addComponents }) => {
+      const gridColumns = 12;
+      const gridGutterWidth = "1.5rem";
+      const gridGutters = {
+        0: "0",
+        1: "0.25rem",
+        2: "0.5rem",
+        3: "1rem",
+        4: "1.5rem",
+        5: "3rem",
+      };
+      const respectImportant = true;
+      const columns = Array.from({ length: gridColumns }, (_, i) => i + 1);
+      const rowColsSteps = columns.slice(0, Math.floor(gridColumns / 2));
+
+      // row
+      addComponents(
+        {
+          ".row": {
+            "--bs-gutter-x": gridGutterWidth,
+            "--bs-gutter-y": 0,
+            display: "flex",
+            flexWrap: "wrap",
+            marginTop: "calc(var(--bs-gutter-y) * -1)",
+            marginRight: "calc(var(--bs-gutter-x) / -2)",
+            marginLeft: "calc(var(--bs-gutter-x) / -2)",
+            "& > *": {
+              boxSizing: "border-box",
+              flexShrink: 0,
+              width: "100%",
+              maxWidth: "100%",
+              paddingRight: "calc(var(--bs-gutter-x) / 2)",
+              paddingLeft: "calc(var(--bs-gutter-x) / 2)",
+              marginTop: "var(--bs-gutter-y)",
+            },
+          },
+        },
+        { respectImportant },
+      );
+
+      // columns
+      addComponents(
+        [
+          {
+            ".col": { flex: "1 0 0%" },
+            ".row-cols-auto": { "& > *": { flex: "0 0 auto", width: "auto" } },
+          },
+          ...rowColsSteps.map((num) => ({
+            [`.row-cols-${num}`]: {
+              "& > *": { flex: "0 0 auto", width: `${100 / num}%` },
+            },
+          })),
+          { ".col-auto": { flex: "0 0 auto", width: "auto" } },
+          ...columns.map((num) => ({
+            [`.col-${num}`]: {
+              flex: "0 0 auto",
+              width: `${(100 / gridColumns) * num}%`,
+            },
+          })),
+        ],
+        { respectImportant },
+      );
+
+      // offset
+      addComponents(
+        [0, ...columns.slice(0, -1)].map((num) => ({
+          [`.offset-${num}`]: { marginLeft: `${(100 / gridColumns) * num}%` },
+        })),
+        { respectImportant },
+      );
+
+      // gutters
+      if (Object.keys(gridGutters).length) {
+        const gutterComponents = Object.entries(gridGutters).reduce(
+          (acc, [key, value]) => {
+            acc[`.g-${key}`] = {
+              "--bs-gutter-x": value,
+              "--bs-gutter-y": value,
+            };
+            acc[`.gx-${key}`] = { "--bs-gutter-x": value };
+            acc[`.gy-${key}`] = { "--bs-gutter-y": value };
+            return acc;
+          },
+          {},
+        );
+        addComponents(gutterComponents, { respectImportant });
+      }
+
+      // order
+      addComponents(
+        [
+          {
+            ".order-first": { order: "-1" },
+            ".order-last": { order: gridColumns + 1 },
+          },
+          ...[0, ...columns].map((num) => ({
+            [`.order-${num}`]: { order: String(num) },
+          })),
+        ],
+        { respectImportant },
+      );
+    };
+  });
+})();

tailwind-plugin/tw-theme.js

@@ -0,0 +1,96 @@
+const plugin = require("tailwindcss/plugin");
+const fs = require("fs");
+const path = require("path");
+const themePath = path.join(__dirname, "../data/theme.json");
+const themeRead = fs.readFileSync(themePath, "utf8");
+const themeConfig = JSON.parse(themeRead);
+
+const findFont = (fontStr) =>
+  fontStr.replace(/\+/g, " ").replace(/:[^:]+/g, "");
+
+module.exports = plugin.withOptions(() => {
+  return ({ addBase, addUtilities }) => {
+    const rootVars = {};
+
+    const baseSize = Number(themeConfig.fonts.font_size.base);
+    const scale = Number(themeConfig.fonts.font_size.scale);
+
+    // Set font sizes
+    const fontSizes = {
+      base: `${baseSize}px`,
+      "base-sm": `${baseSize * 0.8}px`,
+      h1: `${scale ** 5}rem`,
+      "h1-sm": `${scale ** 5 * 0.9}rem`,
+      h2: `${scale ** 4}rem`,
+      "h2-sm": `${scale ** 4 * 0.9}rem`,
+      h3: `${scale ** 3}rem`,
+      "h3-sm": `${scale ** 3 * 0.9}rem`,
+      h4: `${scale ** 2}rem`,
+      h5: `${scale}rem`,
+      h6: `${scale}rem`,
+    };
+    Object.entries(fontSizes).forEach(([k, v]) => {
+      rootVars[`--text-${k}`] = v;
+    });
+
+    // Set font families
+    rootVars["--font-primary"] =
+      `${findFont(themeConfig.fonts.font_family.primary)}, ${themeConfig.fonts.font_family.primary_type}`;
+    rootVars["--font-secondary"] =
+      `${findFont(themeConfig.fonts.font_family.secondary)}, ${themeConfig.fonts.font_family.secondary_type}`;
+
+    // Define color groups
+    const groups = [
+      { colors: themeConfig.colors.default.theme_color, prefix: "" },
+      { colors: themeConfig.colors.default.text_color, prefix: "" },
+      {
+        colors: themeConfig.colors.darkmode.theme_color,
+        prefix: "darkmode-",
+      },
+      { colors: themeConfig.colors.darkmode.text_color, prefix: "darkmode-" },
+    ];
+
+    // Set color variables
+    groups.forEach(({ colors, prefix }) => {
+      Object.entries(colors).forEach(([k, v]) => {
+        rootVars[`--color-${prefix}${k.replace(/_/g, "-")}`] = v;
+      });
+    });
+
+    addBase({ ":root": rootVars });
+
+    // Generate color utilities
+    const colorUtils = {};
+    groups.forEach(({ colors, prefix }) => {
+      Object.keys(colors).forEach((k) => {
+        const cls = k.replace(/_/g, "-");
+        const varRef = `var(--color-${prefix}${cls})`;
+        colorUtils[`.bg-${prefix}${cls}`] = { backgroundColor: varRef };
+        colorUtils[`.text-${prefix}${cls}`] = { color: varRef };
+        colorUtils[`.border-${prefix}${cls}`] = { borderColor: varRef };
+        colorUtils[`.fill-${prefix}${cls}`] = { fill: varRef };
+        colorUtils[`.from-${prefix}${cls}`] = {
+          "--tw-gradient-from": varRef,
+        };
+        colorUtils[`.to-${prefix}${cls}`] = { "--tw-gradient-to": varRef };
+        colorUtils[`.via-${prefix}${cls}`] = {
+          "--tw-gradient-stops": varRef,
+        };
+      });
+    });
+
+    // Generate font utilities
+    const fontUtils = {
+      ".font-primary": { fontFamily: "var(--font-primary)" },
+      ".font-secondary": { fontFamily: "var(--font-secondary)" },
+    };
+    Object.keys(fontSizes).forEach((k) => {
+      fontUtils[`.text-${k}`] = { fontSize: `var(--text-${k})` };
+    });
+
+    addUtilities(
+      { ...colorUtils, ...fontUtils },
+      { variants: ["responsive", "hover", "focus", "active", "disabled"] },
+    );
+  };
+});