How to Use Dynamic Colors in Tailwind CSS from an API

If you want to allow users to change primary and accent colors dynamically through an API, Tailwind CSS does not natively support fetching colors at runtime. However, there are several workarounds to achieve this.

Why Dynamic Colors Are Challenging in Tailwind

Tailwind CSS generates a static CSS file at build time. This means that dynamically adding colors received from an API is not directly supported. However, we can use CSS variables or modify the Tailwind config dynamically.

How to Fetch Colors Dynamically

Here are the best approaches:

1. Using CSS Variables (Best for Runtime Changes)

Tailwind can integrate with CSS variables, allowing dynamic updates.

Tailwind Config (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: 'var(--primary-color-100)',
          200: 'var(--primary-color-200)',
        },
        accent: 'var(--accent-color)',
      },
    },
  },
}

CSS File (global.css)

:root {
  --primary-color-100: #ffffff;
  --primary-color-200: #ffff00;
  --accent-color: #000000;
}

JavaScript to Update Colors from API

fetch('/api/colors')
  .then((response) => response.json())
  .then((data) => {
    document.documentElement.style.setProperty('--primary-color-100', data.primary100)
    document.documentElement.style.setProperty('--primary-color-200', data.primary200)
    document.documentElement.style.setProperty('--accent-color', data.accent)
  })

2. Updating Tailwind Config Dynamically (Best for Build-Time Changes)

If colors are fetched before build time, update tailwind.config.js programmatically.

const fetchColors = async () => {
  const response = await fetch('/api/colors')
  const data = await response.json()
  return {
    primary: {
      100: data.primary100,
      200: data.primary200,
    },
    accent: data.accent,
  }
}

module.exports = async () => {
  const colors = await fetchColors()
  return {
    theme: {
      extend: {
        colors,
      },
    },
  }
}

3. Using a Tailwind Plugin (tw-colors)

If you prefer a package that automates theme changes, use tw-colors.

npm install tw-colors

Then in your tailwind.config.js:

const twColors = require('tw-colors')

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [twColors()],
}

FAQs

1. Can Tailwind CSS fetch colors dynamically at runtime?

No, but you can use CSS variables or fetch colors before build time and inject them into tailwind.config.js.

2. What’s the best way to update Tailwind colors dynamically?

Use CSS variables if you need real-time updates. Modify Tailwind config if you can fetch colors before build time.

3. How can I support dark mode dynamically?

CSS variables can be combined with Tailwind’s dark mode feature:

:root {
  --primary-color: #ffffff;
}
.dark-mode {
  --primary-color: #000000;
}

Then apply it in components:

<div className="bg-[var(--primary-color)]">Hello</div>