DEV Community

Discussion on: Using TailwindCSS v3 in Docusaurus in 5 steps

View post

Replies for: Very useful - thank you! Any chance that you also know how to use Tailwind CSS' dark mode instead of default?

Collapse
 
d_suke profile image
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,
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

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