Logo Settings

The logo is defined inside the header section. You can replace the image source with your own logo file.

<!-- Light logo -->
<img src="/images/logo.svg" alt="Logo" class="h-9 block dark:hidden" />

<!-- Dark logo -->
<img src="/images/logo-light.svg" alt="Logo" class="h-9 hidden dark:block" />

Logo Height

Logo height is controlled using Tailwind utility classes. By default, the logo height is set using: h-9 (36px).

To change the logo height, simply update the height class on both logo images. For example:

<img class="h-12 block dark:hidden" />
<img class="h-12 hidden dark:block" />

You can use any Tailwind height utility such as: h-8 , h-10 , h-12 , or a custom value if enabled in your Tailwind configuration.

Responsive Logo Height

Tailwind allows you to control logo height at different breakpoints. Example:

<img class="h-8 md:h-9 lg:h-10 block dark:hidden" />
<img class="h-8 md:h-9 lg:h-10 hidden dark:block" />

The header height will automatically adapt based on the logo size. No additional adjustments are required.

Summary

• Replace the logo image source to change the logo
• Use Tailwind height utilities to control logo size
• Supports light & dark logos
• Responsive sizes supported out of the box
• No SCSS or config changes required