Tailwind CSS Dark Mode

With dark mode becoming a first-class feature in many operating systems, it's increasingly common to design a dark version of your website alongside the default design. By integrating dark mode, you can meet user preferences and improve readability in low-light environments, ensuring your site is both functional and aesthetically pleasing.

Tailwind and Preline UI make this easy by including a dark variant, allowing you to style your site differently when dark mode is enabled.

Toggling dark mode manually

If you want your dark theme to be driven by a CSS selector instead of the prefers-color-scheme media query, override the dark variant to use your custom selector:

                
                  @import 'tailwindcss';
                  
                  @custom-variant dark (&:where(.dark, .dark *));
                
              

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

How you add the dark class to the html element is up to you, but a common approach is to use a bit of JavaScript that updates the class attribute and syncs that preference to somewhere like localStorage.

For more information, visit Tailwind CSS Dark Mode

Switcher

Use data-hs-theme-switch If you want to create a dark mode switcher for Tailwind CSS and Preline UI, you'll have to add some JavaScript code and a toggle element that a user can use to change their preferences.