Configuring Tailwind styles

1. tailwind.config.js

This file contains and controls all the tailwind css default components.It also contains the color scheme, font, spacing and other common staff. If you want customize anything of tailwind, you can literally do it here by overriding tailwind variables.otherwise you can explore more option link

Update Logo

How to change logo

Dark Mode

Using Tailwind CSS to style your site in dark mode.Here is the official documentation we are follow Link

Toggling dark mode manually

If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy instead of the media strategy:.you add the dark class to the body element is up to you, but a common approach is to use a bit of JS that reads a preference from somewhere (like localStorage) and updates the DOM accordingly.

Now instead of dark:{class} classes being applied based on prefers-color-scheme, they will be applied whenever dark class is present earlier in the HTML tree.

If you’ve set a prefix in your Tailwind config, be sure to add that to the dark class. For example, if you have a prefix of tw-, you’ll need to use the tw-dark class to enable dark mode. How you add the dark class to the html element is up to you, but a common approach is to use a bit of JS that reads a preference from somewhere (like localStorage) and updates the DOM accordingly.

you can edit dark mode color , here is the screenshot given up. and those colors we are use for make dark theme

Navigation Structure

Side menu

Change the navigation according to your content, also you can add or remove according to your needs.

Top menu

Change the top menu according to your content, also you can add or remove according to your needs.

Note: We have created a exemplary navigation structure for your convenience, located within the Hexadash-Tailwind-Boilerplate directory. We have already included two menu items, one for the top menu and one for the side menu. When you click on a menu item, it will open the corresponding submenu and top menu on separate pages.

For Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.
You can add a Favicon to your Website using the following code:

For Changing Fonts & Icons

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the Style.css in all HTML file. See example below: