Solved: Tailwind properties missing in production

So, one fine (Monday) morning, I was fully committed to optimise my portfolio website - https://utkarsh-tiwari-portfolio-react.netlify.app/. Built using React and Tailwind CSS, everything was coming out great.

When I deployed it on gh-pages, something broke! The background colour behind the images in the skills section was just transparent!
But I had properly given different colours like bg-teal-100, bg-amber-300, bg-green-100, bg-emerald-800, bg-yellow-800, etc.

I checked the localhost 10 times, it worked on my machine!

The problem exactly -

Localhost:

The not-so Localhost a.k.a gh-pages:

The culprit =

Turns out that while I was trying to be too smart for my own good and over-optimising the code, I dynamically injected the bg-colors from the skills.js file.

Snapshot of skillsData.js file -

export const skillsData = [
  {
    id: 1,
    img: "/images/html-css-logo.png",
    alt: "html-css-logo",
    name: "HTML & CSS",
    level: "Proficient",
    bgColor: "teal-800",
  },
]

Snapshot of skills.jsx file -

<li className="col-span-1 flex shadow-sm rounded-md" key={skill.id}>
    <div className={`bg-${skill.bgColor} text-sm font-medium justify-center w-16`}>
...
...
...
    </div>
</li>

Do you see the bgColor property? That's being dynamically inserted!

And when we build for production, Tailwind purges all the unused css to reduce the overhead and only adds the classes which are actually being used.

So, the dynamic values (which are basically completing the property names) are not exactly "in-use" when purge css runs. Hence they are removed.

(If you did not understand what I meant - "The exact property name is bg-teal-500, but since the code is split into two parts, it looks like the value is just bg-")

Pro - File size is reduced and overall it will be faster.
Con - Dynamically injected values are not compiled and hence are lost in production.
Result - Transparent background 🥲

PS: I've a new site on utk09.com