How to set multiple themes in tailwind css?
How to set multiple themes in tailwind css?
1 answer
by
mac ,
4 months ago
@filiberto
You can set multiple themes in Tailwind CSS by creating multiple theme configurations in your tailwind.config.js file. Here's an example of how you can set multiple themes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
100: '#FBE7C6',
200: '#FBC28F',
300: '#FA9A4D',
400: '#F27206',
500: '#D45207',
600: '#973A08',
700: '#722C0A',
800: '#55210B',
900: '#491609',
},
secondary: {
100: '#D6F5EE',
200: '#AACFC9',
300: '#80A9A4',
400: '#538582',
500: '#2B625A',
600: '#1C4945',
700: '#123532',
800: '#092425',
900: '#051D1D',
},
},
},
},
variants: {},
plugins: [],
}
|
In this example, we have defined two themes: primary and secondary, each with different color palettes. You can then use these themes in your HTML or JSX files by applying the appropriate classes, like so:
1 2 |
<div class="bg-primary-500 text-white">Primary Theme</div> <div class="bg-secondary-500 text-white">Secondary Theme</div> |
By setting up multiple themes in this way, you can easily switch between different themes in your project by changing the classes applied to your elements.