fix tailwind by making a copy for copying and update README

fix(baseof.html): resolve deprecated resources.PostCSS

README.md

@@ -49,6 +49,13 @@ The theme comes with a fully functional example site that demonstrates its featu
 
 ### Using the Example Site
 
+The example site provides a great starting point to understand how to:
+- Structure your content
+- Use different page layouts
+- Configure navigation menus
+- Set up site parameters
+- Implement common SaaS website features
+
 1. Copy the example site content:
 ```bash
 cp -r themes/hugo-saasify-theme/exampleSite/* .
@@ -63,51 +70,13 @@ cp -r themes/hugo-saasify-theme/exampleSite/* .
 - Company information page
 - Properly configured hugo.toml
 
-3. Start the development server:
-```bash
-npm run start
-```
-
-The example site provides a great starting point to understand how to:
-- Structure your content
-- Use different page layouts
-- Configure navigation menus
-- Set up site parameters
-- Implement common SaaS website features
-
 ### 4. Install dependencies
 
 ```bash
 # Copy package.json and other config files to your site root
 cp themes/hugo-saasify-theme/package.json .
 cp themes/hugo-saasify-theme/postcss.config.js .
-cp themes/hugo-saasify-theme/tailwind.config.js .
-
-# Update tailwind.config.js with the following content:
-```
-
-```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  presets: [require('./themes/hugo-saasify-theme/tailwind.config.js')],
-  content: [
-    "./themes/hugo-saasify-theme/layouts/**/*.html",
-    "./layouts/**/*.html",
-    "./content/**/*.{html,md}"
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        heading: ['Plus Jakarta Sans', 'sans-serif'],
-      },
-    },
-  },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-  ],
-}
+cp themes/hugo-saasify-theme/tailwind.config.copy.js ./tailwind.config.js
 ```
 
 ```bash

exampleSite/hugo_stats.json

@@ -286,6 +286,7 @@
       "p-4",
       "p-6",
       "p-8",
+      "pb-16",
       "pb-20",
       "pb-24",
       "pb-32",

exampleSite/static/css/style.css

@@ -2221,6 +2221,11 @@ h1, h2, h3, h4, h5, h6 {
   order: 2;
 }
 
+.\!my-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
 .-mx-6 {
   margin-left: -1.5rem;
   margin-right: -1.5rem;
@@ -2236,6 +2241,14 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 2rem;
 }
 
+.\!mb-24 {
+  margin-bottom: 6rem !important;
+}
+
+.\!mt-0 {
+  margin-top: 0px !important;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -2355,6 +2368,10 @@ h1, h2, h3, h4, h5, h6 {
   aspect-ratio: 1 / 1;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -2407,6 +2424,10 @@ h1, h2, h3, h4, h5, h6 {
   min-height: 100vh;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -2471,6 +2492,10 @@ h1, h2, h3, h4, h5, h6 {
   max-width: 80rem;
 }
 
+.max-w-\[200px\] {
+  max-width: 200px;
+}
+
 .max-w-none {
   max-width: none;
 }
@@ -2624,6 +2649,12 @@ h1, h2, h3, h4, h5, h6 {
   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-12 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2674,6 +2705,10 @@ h1, h2, h3, h4, h5, h6 {
   white-space: nowrap;
 }
 
+.\!rounded-none {
+  border-radius: 0px !important;
+}
+
 .rounded-2xl {
   border-radius: 1rem;
 }
@@ -2959,6 +2994,10 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 2rem;
 }
 
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .pb-20 {
   padding-bottom: 5rem;
 }
@@ -3104,6 +3143,11 @@ h1, h2, h3, h4, h5, h6 {
   letter-spacing: 0.05em;
 }
 
+.\!text-white {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -3174,6 +3218,10 @@ h1, h2, h3, h4, h5, h6 {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.\!no-underline {
+  text-decoration-line: none !important;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -3186,6 +3234,12 @@ h1, h2, h3, h4, h5, h6 {
   opacity: 0.75;
 }
 
+.\!shadow-none {
+  --tw-shadow: 0 0 #0000 !important;
+  --tw-shadow-colored: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -4208,6 +4262,10 @@ h1, h2, h3, h4, h5, h6 {
   color: rgb(3 105 161 / var(--tw-text-opacity, 1));
 }
 
+.hover\:opacity-90:hover {
+  opacity: 0.9;
+}
+
 .hover\:shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -4220,6 +4278,12 @@ h1, h2, h3, h4, h5, h6 {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:grayscale-0:hover {
   --tw-grayscale: grayscale(0);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -4365,6 +4429,10 @@ h1, h2, h3, h4, h5, h6 {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .md\:p-12 {
+    padding: 3rem;
+  }
+
   .md\:pb-28 {
     padding-bottom: 7rem;
   }

layouts/_default/baseof.html

@@ -57,7 +57,7 @@
     
     <!-- Main CSS -->
     {{ $css := resources.Get "css/main.css" }}
-    {{ $css = $css | resources.PostCSS }}
+    {{ $css = $css | css.PostCSS }}
     {{ if hugo.IsProduction }}
         {{ $css = $css | minify | fingerprint | resources.PostProcess }}
     {{ end }}

tailwind.config.copy.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    presets: [require('./themes/hugo-saasify-theme/tailwind.config.js')],
+    content: [
+      "./themes/hugo-saasify-theme/layouts/**/*.html",
+      "./layouts/**/*.html",
+      "./content/**/*.{html,md}"
+    ],
+    theme: {
+      extend: {
+        fontFamily: {
+          sans: ['Inter', 'system-ui', 'sans-serif'],
+          heading: ['Plus Jakarta Sans', 'sans-serif'],
+        },
+      },
+    },
+    plugins: [
+      require('@tailwindcss/forms'),
+      require('@tailwindcss/typography'),
+    ],
+  }

tailwind.config.js

@@ -39,4 +39,4 @@ module.exports = {
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
   ],
-}
+}