Had a brainstorm to change the color of headers based on Contentful CMS input. That should be easy right? First thing I did is make sure I have the correct color classes that I need — "text-blue", "text-pink" and "text-red". I added them statically to the header and made sure each works in the desktop environment. Using Next.js for the front end I destructure the props with the colors and can see the color coming from Contentful. Yay!
This seems to work and I call it good and start cleaning up my code with the hardcoded color classes. I check back again ready to commit and it isn't working. I can see the class coming through in the rendered code, but all the headers are back to being their default colors. What's going on?
After several attempts of rewriting the code and checking on the staging environment. I figured out that tailwind purges classes created with variables. If it doesn't see "text-blue" in the code, it will purge it. In this case it is just seeing text-${variable}. My quick fix was to just create a variable with these classes to prevent the purge.
Don't use variables.
That's what I learned today and will probably forget tomorrow.
Update: I ended up adding the list the the safelist. Here is an example of where it should go in tailwind.config.js