Update TailwindCSS color palette programmatically

Tailwind is a highly flexible framework in terms of configuration. I want to show how we can create dynamic color palettes using it. All we need is the tailwind.config.js and CSS Variables. So you can change the color palette as you want at runtime.

Lets define our CSS varaibles in main style.css|scss file:

:root {
  --nx-theme-50: #fffce7;
  --nx-theme-100: #fffac1;
  --nx-theme-200: #fff086;
  --nx-theme-300: #ffe041;
  --nx-theme-400: #ffcb0d;
  --nx-theme-500: #f0b000;
  --nx-theme-600: #d18700;
  --nx-theme-700: #a65f02;
  --nx-theme-800: #894a0a;
  --nx-theme-900: #743d0f;
  --nx-theme-950: #441f04;
}

And TailwindCSS config:

export default {
  content: ['./index.html', './src/**/*.{vue,ts}'],
  theme: {
    extend: {
      colors: {
        'nx-theme': {
          50: 'var(--nx-theme-50)',
          100: 'var(--nx-theme-100)',
          200: 'var(--nx-theme-200)',
          300: 'var(--nx-theme-300)',
          400: 'var(--nx-theme-400)',
          500: 'var(--nx-theme-500)',
          600: 'var(--nx-theme-600)',
          700: 'var(--nx-theme-700)',
          800: 'var(--nx-theme-800)',
          900: 'var(--nx-theme-900)',
          950: 'var(--nx-theme-950)',
        },
      },
    },
  },
  plugins: [],
};

That's all. Then you can set any color to these predefined CSS variables programatically.

But there is a problem with this method. Tailwind can't track CSS variables and with this method we can't use opacity property over colors like bg-nx-theme-100/70. This strategy may useful for third party packages.

Example:

const root = document.documentElement;
root.style.setProperty(`--nx-theme-500`, '#ffffff')

Demo:

Source code: https://github.com/relliv/css-variable-and-tailwind-color-theme-change-example

---

By the way, you can define transparent colors like this:

:root {
  --nx-theme-50: #fffce7;
  ...
  --nx-theme-950: #441f04;
  --nx-theme-1000: #ffcb0d3e;
}

export default {
  content: ['./index.html', './src/**/*.{vue,ts}'],
  theme: {
    extend: {
      colors: {
        'nx-theme': {
          50: 'var(--nx-theme-50)',
          ...
          1000: 'var(--nx-theme-1000)',
        },
      },
    },
  },
  plugins: [],
};