Dynamic Styles

[CryogenicPlanet]

What version of @tailwindcss/jit are you using?

0.1.18

What version of Node.js are you using?

14.15.5

What build tool (or framework if it abstracts the build tool) are you using?

Next,js@latest

What browser are you using?

Firefox

What operating system are you using?

Pop Os

Reproduction repository

https://github.com/CryogenicPlanet/tailwind-jit-dynamic-styles

Ran into this bug when converting a regular tailwind codebase to use the @tailwindcss/jit, where dynamic styling is not generated at all.

Styling based on state like this, where color can be red | green. I use this as it is shorter and cleaner than writing a ternary operator each time especially when you want to change a lot of styles based on color.

      <p className={`text-${color}-500 text-3xl`}>I am colored text</p>

I fully recognise that something like this may not be possible to support, but wanted to report it as a bug and see if there were any potential ways to mitigate it.

Reproduction

1. Clone https://github.com/CryogenicPlanet/tailwind-jit-dynamic-styles
2. Install and Run yarn and yarn dev

The error will be clearly visible that none of the elements have been styled

[adamwathan]

Hey! This will not work like you've noticed, and also wouldn't work with regular Tailwind if you were purging unused styles in production. The recommended solution is to not use dynamically interpolated class names (dynamically select from complete class names instead), or if you really aren't willing to do that then you need to safelist the classes that could be generated.