Custom Typography and Colors are conflicting.

[liljamesjohn]

Adding custom typography shown in the docs and then custom a custom text colour is causing conflicts with styling, with the text either using the colour or typography but not both.

Typography

@theme {
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem; 
  --text-tiny--letter-spacing: 0.125rem; 
  --text-tiny--font-weight: 500; 
}

Color

@theme {
  --color-regal-blue: #243c5a; 
}

The following only uses one of the classes, but not both.

<p className="text-tiny text-regal-blue">Hello world</p>

Does anyone know how to get around this? I figured out you can use the important exclamation mark, but there has to be a better way than doing that for every time you assign text color?

[wongjn]

Seem to be working in this Tailwind Play which would suggest it could be something particular to your project. Perhaps you have tailwind-merge but haven't configured it for your custom theme values? Otherwise, consider providing a git repo that reproduces the unexpected behavior.