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 to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy:

                
                  // tailwind.config.js
                  module.exports = {
                    darkMode: 'class',
                    // ...
                  }
                
              

If you want to rely on the browser's color scheme preference, use the media strategy:

                
                  // tailwind.config.js
                  module.exports = {
                    darkMode: 'media',
                    // ...
                  }
                
              

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.

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.