Discussion on: Using TailwindCSS v3 in Docusaurus in 5 steps

[haobinliang]

Very useful - thank you!

Any chance that you also know how to use Tailwind CSS' dark mode instead of default?

[d-suke]

Hello haobinliang

I have found a way to make Tailwind CSS and Docusaurus dark mode coexist.
Put the following in docusaurus.config.js

module.exports = {
  themeConfig: {
    colorMode: {
      disableSwitch: true,
      respectPrefersColorScheme: true,
    },
  },
};

This allows styling with the dark utilities of Tailwind CSS.
There is a caveat, however, that you cannot manually toggle the color mode.

[Siagian]

Hi, you can update your tailwind.config.js with the following setting

module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
}

[swyx]

this was perfect. cheers