[Bug?]: Tailwind not rendering colors passed from prop

[MariuzM]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When i pass colors via props it does not render them, checking browser css window its not even there, but if i use styles and pass colors there then it works.

I'm not sure if this is due to Solid way of rendering or i missed something?

I used SolidStart Tailwind template and added this code to test

import { createSignal } from 'solid-js';

export default function Test() {
  return (
    <main>
      <div class="flex flex-col w-fit">
        <DivBaseColorChange />
        <DivPropColorChange color="blue" />
        <DivSignalColorChange />
        <DivStyleColorChange />
      </div>
    </main>
  );
}

const DivBaseColorChange = () => {
  return (
    <div>
      <div>1</div>
      <div class="bg-red-500 w-10 h-10" />
    </div>
  );
};

const DivPropColorChange = (p: { color: 'blue' | 'green' | 'red' | 'yellow' }) => {
  return (
    <div>
      <div>2</div>
      <div class={`bg-${p.color}-500 w-10 h-10`} />
    </div>
  );
};

const DivSignalColorChange = () => {
  const [color, setColor] = createSignal('blue');

  return (
    <div>
      <div>3</div>
      <div class={`bg-${color()}-500 w-10 h-10`} />
    </div>
  );
};

const DivStyleColorChange = () => {
  const [color, setColor] = createSignal('blue');

  return (
    <div>
      <div>4</div>
      <div class="bg-red-500 w-10 h-10" style={{ background: color() }} />
    </div>
  );
};

[MariuzM]

Maybe not solid issue, i've added custom colors and those seem to work, so looks like Tailwind is removing colors that are conditionally rendered? but is that Tailwind or solid?

[MariuzM]

Ok ignore this found its tailwind thing https://stackoverflow.com/questions/67289894/jit-tailwindcss-using-variable-in-bg-not-rendering-color