Customization

Make Hugo Saasify your own with custom styles and configurations.

Colors

Customize your color palette in tailwind.config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#6366f1',
        secondary: '#8b5cf6',
      },
    },
  },
}

Typography

Adjust fonts and text styling in your site configuration or TailwindCSS config.

Layouts

Override default layouts by creating a file with the same path in your layouts directory.

Components

All components use TailwindCSS, making them easy to customize and adapt to your needs.