Tonight was the night I was going to update one of my websites to the latest Tailwind CSS version (v3) and the latest Laravel version (v9). In the past I had tried to update these, but the Tailwind CSS update sent me down rabbit holes I wasn’t ready to go down.

This time, I took a more calculated approach. I also leaned heavy on the fact that the maintainers of these tools are prolific in the way they make their products so welcoming and easy to use. That means the answer to my problems was probably in their docs somewhere.

I followed the upgrade guide as I did previously and pulled in the updated packages. I refreshed my website and found I was exactly where I left off: most of my colors were missing! I inspected the different components and everything seemed correct. Keep in mind, this site was working perfectly fine pre-update. I singled out a button that was supposed to be blue on hover. No typos or obvious issues. So I tried to type it into the dev tools inspector manually, just to see if it would work. That’s when I noticed that only 3 shades of blue were available.

Because I’m dynamically assigning colors, Tailwind CSS doesn’t have any way to crawl the code to safe-list classes before purging unused classes from the CSS file - they don’t even exist at that point. No problem, I was already safe-listing these. After shuffling around the safe-list location I realized that one thing was off in my Webpack configuration: I wasn’t requiring Tailwindcss:

// webpack.mix.js\ mix.js("resources/js/app.js", "public/js") .postCss("resources/css/app.css", "public/css", [``require("tailwindcss")

The last thing I changed was the tailwind.config.js file to include:

content: ["./resources/**`/*.blade.php”, “./resources/`**

I’m not sure if it matters, but I was grabbing anything that ended in .php. For the sake of my sanity, I just made sure I copied the Tailwind CSS Installation Guide to the letter.

And that did it!