How do you enable dark mode in Tailwind projects?

Question

Q&A Network · Accepted Answer

To enable dark mode in Tailwind CSS, you need to configure it in your `tailwind.config.js` file. Tailwind supports dark mode by using the `dark` variant, which you can apply to your classes.


    
    // tailwind.config.js
    module.exports = {
      darkMode: 'class', // or 'media'
      // other configurations...
    }

ADDITIONAL COMMENT:

Setting `darkMode: 'class'` allows you to toggle dark mode by adding a `dark` class to an element, usually the `` or `` tag.
Alternatively, `darkMode: 'media'` enables dark mode based on the user's system preferences.
Once configured, use the `dark:` prefix to apply styles for dark mode, e.g., `dark:bg-gray-800`.
Ensure your HTML structure supports toggling the `dark` class if using the class strategy.

✅ Answered with Tailwind CSS best practices.

How do you enable dark mode in Tailwind projects?

Asked on Oct 10, 2025

Answer

The Q&A Network