How to set multiple themes in tailwind css?

by filiberto , in category: HTML & CSS , 3 months ago

How to set multiple themes in tailwind css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by mac , 3 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.