removed tailwind.config.js update step

This commit is contained in:
Chaoming Li 2024-12-31 14:49:43 +11:00
parent 8b9a808c31
commit 9e3e083f2f
4 changed files with 83 additions and 66 deletions

View file

@ -49,6 +49,13 @@ The theme comes with a fully functional example site that demonstrates its featu
### Using the Example Site ### 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: 1. Copy the example site content:
```bash ```bash
cp -r themes/hugo-saasify-theme/exampleSite/* . cp -r themes/hugo-saasify-theme/exampleSite/* .
@ -63,18 +70,6 @@ cp -r themes/hugo-saasify-theme/exampleSite/* .
- Company information page - Company information page
- Properly configured hugo.toml - 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 ### 4. Install dependencies
```bash ```bash
@ -82,32 +77,6 @@ The example site provides a great starting point to understand how to:
cp themes/hugo-saasify-theme/package.json . cp themes/hugo-saasify-theme/package.json .
cp themes/hugo-saasify-theme/postcss.config.js . cp themes/hugo-saasify-theme/postcss.config.js .
cp themes/hugo-saasify-theme/tailwind.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'),
],
}
``` ```
```bash ```bash

View file

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

View file

@ -2221,6 +2221,11 @@ h1, h2, h3, h4, h5, h6 {
order: 2; order: 2;
} }
.\!my-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.-mx-6 { .-mx-6 {
margin-left: -1.5rem; margin-left: -1.5rem;
margin-right: -1.5rem; margin-right: -1.5rem;
@ -2236,6 +2241,14 @@ h1, h2, h3, h4, h5, h6 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.\!mb-24 {
margin-bottom: 6rem !important;
}
.\!mt-0 {
margin-top: 0px !important;
}
.mb-1 { .mb-1 {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@ -2355,6 +2368,10 @@ h1, h2, h3, h4, h5, h6 {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }
.h-10 {
height: 2.5rem;
}
.h-12 { .h-12 {
height: 3rem; height: 3rem;
} }
@ -2407,6 +2424,10 @@ h1, h2, h3, h4, h5, h6 {
min-height: 100vh; min-height: 100vh;
} }
.w-10 {
width: 2.5rem;
}
.w-12 { .w-12 {
width: 3rem; width: 3rem;
} }
@ -2471,6 +2492,10 @@ h1, h2, h3, h4, h5, h6 {
max-width: 80rem; max-width: 80rem;
} }
.max-w-\[200px\] {
max-width: 200px;
}
.max-w-none { .max-w-none {
max-width: 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))); 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]) { .space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); 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; white-space: nowrap;
} }
.\!rounded-none {
border-radius: 0px !important;
}
.rounded-2xl { .rounded-2xl {
border-radius: 1rem; border-radius: 1rem;
} }
@ -2959,6 +2994,10 @@ h1, h2, h3, h4, h5, h6 {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.pb-16 {
padding-bottom: 4rem;
}
.pb-20 { .pb-20 {
padding-bottom: 5rem; padding-bottom: 5rem;
} }
@ -3104,6 +3143,11 @@ h1, h2, h3, h4, h5, h6 {
letter-spacing: 0.05em; 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 { .text-blue-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(59 130 246 / var(--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)); color: rgb(255 255 255 / var(--tw-text-opacity, 1));
} }
.\!no-underline {
text-decoration-line: none !important;
}
.opacity-0 { .opacity-0 {
opacity: 0; opacity: 0;
} }
@ -3186,6 +3234,12 @@ h1, h2, h3, h4, h5, h6 {
opacity: 0.75; 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 { .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: 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); --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)); color: rgb(3 105 161 / var(--tw-text-opacity, 1));
} }
.hover\:opacity-90:hover {
opacity: 0.9;
}
.hover\:shadow-lg:hover { .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: 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); --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); 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 { .hover\:grayscale-0:hover {
--tw-grayscale: grayscale(0); --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); 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)); margin-bottom: calc(0px * var(--tw-space-y-reverse));
} }
.md\:p-12 {
padding: 3rem;
}
.md\:pb-28 { .md\:pb-28 {
padding-bottom: 7rem; padding-bottom: 7rem;
} }

View file

@ -1,34 +1,13 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./layouts/**/*.html"], presets: [require('./themes/hugo-saasify-theme/tailwind.config.js')],
content: [
"./themes/hugo-saasify-theme/layouts/**/*.html",
"./layouts/**/*.html",
"./content/**/*.{html,md}"
],
theme: { theme: {
extend: { extend: {
colors: {
primary: {
50: '#eef1fc',
100: '#dde3f9',
200: '#bbc7f3',
300: '#99abec',
400: '#778fe6',
500: '#5573df',
600: '#425ad6',
700: '#3548ab',
800: '#283680',
900: '#1b2456',
},
secondary: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7e22ce',
800: '#6b21a8',
900: '#581c87',
},
},
fontFamily: { fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'], sans: ['Inter', 'system-ui', 'sans-serif'],
heading: ['Plus Jakarta Sans', 'sans-serif'], heading: ['Plus Jakarta Sans', 'sans-serif'],
@ -39,4 +18,4 @@ module.exports = {
require('@tailwindcss/forms'), require('@tailwindcss/forms'),
require('@tailwindcss/typography'), require('@tailwindcss/typography'),
], ],
} }