Here's a quick one that will hopefully help someone prevent or fix a self-imposed bug in their code.
Creating a dynamic class name the wrong way (see below) feels like a very intuitive approach for many developers.
I personally made this mistake and it took me a while to realize what the problem was...and I had previously read through the docs 🤓. The info is there↗, I just happened to forget about it.
Tailwind will only find classes that exist as complete unbroken strings in your source files.
Don't Do
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>Do Do
Instead, make sure any class names you're using exist in full:
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>From the Tailwind CSS↗ docs.