How can I have dynamic 'primary' classes in TailwindCSS?

user_10464642 0
Viewed 93

I need to have a dynamic theme for my website that comes from a database, possible values are theme-1, theme-2 etc. and I want each one to change the color palette of the site, i.e the primary tailwind color being green for theme-1 but blue for theme-2.

I have tried using https://github.com/upupming/tailwindcss-themeable but it is such an overkill as it regenerates all the colors and has a very cumbersome and long prefix before each class. I want to define the 'theme-1' class at the body level and do something along the lines of this pseudo code

.theme-2 {
  /* primary-500 is now color: blue */
}

I am using Tailwind v2 due to dependency constraints.

tailwind-css css javascript
1 Answers

Solution: use CSS Variables.

main.css

:root .theme-1 {
        --tw-text-opacity: 1;
        --color-primary-50: 235,242,254;
        --color-primary-100: 215,230,253;
        --color-primary-200: 176,205,251;
        --color-primary-300: 137,180,250;
        --color-primary-400: 98,155,248;
        --color-primary-500: 59,130,246;
        --color-primary-600: 11,97,238;
        --color-primary-700: 8,75,184;
        --color-primary-800: 6,53,131;
        --color-primary-900: 4,31,77;
    }

tailwind.config.js

colors: {
    ...
    primary: {
        50: 'rgba(var(--color-primary-50), var(--tw-text-opacity))',
        100:'rgba(var(--color-primary-100), var(--tw-text-opacity))',
        200:'rgba(var(--color-primary-200), var(--tw-text-opacity))',
        300:'rgba(var(--color-primary-300), var(--tw-text-opacity))',
        400:'rgba(var(--color-primary-400), var(--tw-text-opacity))',
        500:'rgba(var(--color-primary-500), var(--tw-text-opacity))',
        600:'rgba(var(--color-primary-600), var(--tw-text-opacity))',
        700:'rgba(var(--color-primary-700), var(--tw-text-opacity))',
        800:'rgba(var(--color-primary-800), var(--tw-text-opacity))',
        900:'rgba(var(--color-primary-900), var(--tw-text-opacity))'
    }

...

Now you can use text-primary-500 and have the color change with only 1 parent class

user_131073110
Related