Using tailwind colors in javascript

[dirkcremers]

Hey there,

This might be a dumb question, but I haven’t been able to figure it out.
Before, I used Tailwind colors in my JavaScript by doing:

import colors from "tailwindcss/colors"

Now with the new Tailwind v4, I’m wondering how this should be done.

Thanks!

[wongjn]

How would you use colors?

If you would go on to reference a value in other theme values, you can use native CSS var() syntax to do so:

@theme {
  --color-foo: var(--color-red-500);
}

[dirkcremers]

I would use it in the following way:

import colors from 'tailwindcss/colors'

const indicatorColour = computed(() => {
  switch (ref.value) {
    case 'alert':
      return colors.red[400]
    case 'warning':
      return colors.orange[400]
    default:
      return colors.sky[500]
  }
})

This I would then use for my background for example:
<div :class="indicatorColour"></div>

[wongjn]

You could do:

const indicatorColour = computed(() => {
  switch (ref.value) {
    case 'alert':
      return 'var(--color-red-400)';
    case 'warning':
      return 'var(--color-orange-400)';
    default:
      return 'var(--color-sky-500)';
  }
});

[dirkcremers]

Aaah thanks – this helps a lot.

Maybe one last question for a module (https://docs.tresjs.org/advanced/primitive.html#props) which I am using: the :color property requires either a Hexadecimal or an RGB/RGBA value. Is this also possible to use in combination with Tailwind v4? Since the option you mentioned, var(--color-sky-500), does not work out of the box. ChatGPT and other tools are also not providing any relevant information except for manually defining the values

[wongjn]

See https://tailwindcss.com/docs/theme#referencing-in-javascript