Tailwind x Svelte: Colours not Appearing

Tailwind colour classes sometimes do not work with Svelte which perplexed me for some time, so I'm just sharing for others who are bamboozled.

The issue comes with dynamic classes, e.g.:

  const colours = [
    "teal", "red", "yellow", "green", "blue", "orange"
  ];
  var randomColour = colours[Math.floor(Math.random() * colours.length)];

  <div class="bg-{randomColour}-300">
     <p>Ooo isn't this a lovely colour?</p>
  </div>

Because svelte is pre-compiled, it misses bundling those colours that it can't "see" up-front.

To rectify this, include a tiny patch of each colour on any page in your application, e.g.

  <div class="hidden">
    <div class="bg-teal-300"></div>
    <div class="bg-red-300"></div>
    <div class="bg-yellow-300"></div>
    <div class="bg-green-300"></div>
    <div class="bg-blue-300"></div>
    <div class="bg-purple-300"></div>
    <div class="bg-orange-300"></div>
  </div>

Related docs

Svelte 5 Runes explained (for Svelte 4 developers)

OpenAI ChatGPT API 429 "Too Many Requests" error - SOLVED

What's so good about Tailwind?

SQL vs MongoDB

Most Annoying MongoDB Atlas Gotcha

Tailwind x Svelte: Colours not Appearing

clog() / slog() - console log functions with infinite depth

How it works

Creating a Headless Blog with Svelte