Svelte Headless CMS

Tailwind x Svelte: Colours not Appearing

Blog Getting Started

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>

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>

Related docs

Download the code for this blog from GitHub at