@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.