Twin.macro: Extended colour does not change on reload (Next.js)

[theairbend3r]

I'm trying to extend the theme. I want to add a new colour while using Next.js.
To install the libraries, I followed the instructions given in this repo.

When I first set a colour in tailwind.config.js, it works.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        lol: "#ddad12",
      },
    },
  },
}

I save the file and use it as follows.

import "twin.macro"

const Main = () => {
  return <div tw="bg-lol p-1 h-full">Main</div>
}

export default Main

But when I change the colour in the tailwind.config.js as -

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        lol: "#bb15bb",
      },
    },
  },
}

The changes do not happen on the page. I can still see the previous colour. I tried this out in the Codesandbox for Next.js and it happens there as well.

I even restarted the npm run dev but effects do not take effect.

[ben-rogerson]

This is fixed by making a change in your code to force a recompile - it's part of the caching in next.

I'm aiming to defeat this cache automatically in an upcoming patch 🤞