tailwind1-1  Exercise 2: The Class That Never Appeared
======================================================

# input.css (one line)
@import "tailwindcss";

# badge.js, first version: the colour is pieced together at run time
function badge(color) {
  return `bg-${color}-500 text-white px-2`;
}
document.body.innerHTML = badge("red") + badge("green") + badge("blue");

# build, and list the utilities that were generated
npx @tailwindcss/cli -i input.css -o out.css
grep -E "^\s+\.(bg-|text-white|px-)" out.css

Output:

  .px-2 {
  .text-white {

# badge.js, fixed: every class is written out in full, and chosen by a lookup
const colors = {
  red: "bg-red-500",
  green: "bg-green-500",
  blue: "bg-blue-500",
};

function badge(color) {
  return `${colors[color]} text-white px-2`;
}
document.body.innerHTML = badge("red") + badge("green") + badge("blue");

# build again
npx @tailwindcss/cli -i input.css -o out.css
grep -E "^\s+\.(bg-|text-white|px-)" out.css

Output:

  .bg-blue-500 {
  .bg-green-500 {
  .bg-red-500 {
  .px-2 {
  .text-white {

WHY THIS WORKS AS AN ANSWER
---------------------------
Tailwind reads the file as text and never runs it. In the first version the text "bg-red-500" does not exist anywhere in the file, only "bg-" and "-500" with a
variable between them, so nothing matches and no background rule is written (text-white and px-2 are fine because they are written whole). The page would show
white text on no background.
In the fixed version each name appears complete in the object, so Tailwind sees all three. The function still displays exactly the same classes, and the lookup
object has a side benefit: it is the one place that lists which colours are allowed.