A plugin to enable theme switching in the tailwind
npm install tailwind-theme-switcher
yarn add tailwind-theme-switcher
`
or
`
npm install tailwind-theme-switcher
`
And in your tailwind.config.js file
`
module.exports = {
//...
plugins: [
require('tailwind-theme-switcher')
]
//...
}
`
Usage
Add the color values as you normally do to your "theme" property
`
module.exports = {
theme: {
//....
colors: {
bg: "#fff"
}
//...
}
}
`
To add a dark mode,
`
module.exports = {
theme: {
//....
themes: {
dark: {
bg: "#000"
}
},
colors: {
bg: "#fff"
}
//...
}
}
`
No if you add the class theme-dark to a root parent element (html, body or a wrapper element), all its child elements will have the dark mode colors applied.
You can add any number of themes this way, and the related classes will be created in the form theme-${themeName}`