Weird behaviour after customizing theme in tailwind.config

[tonymanuel]

Below is the code which have added in tailwind.config.js for creating custom class for background color. If you notice the index.js file am using "bg-primary" in TwDiv . Now when I run the application for the first time 'bg-primary' class gets applied to the component and works perfectly. Now when I change the primary color in tailwind.config, the component does not get the new background color and it is rendered with the previous bg color only . I tried refreshing my browser, I tried restarting my NEXTjs server and still the component is having the initial background color. The weird thing that I noticed was, when I make any changes to the components children, sometime the styles get updated. This issue occurs only when I use twin macro, where as if I create a normal div and add the tailwind classes using className prop it works fine and the changes are also visible immediately after modifying the tailwind.config without having to refresh the browser.

Here is the sandbox link https://codesandbox.io/s/lingering-sunset-hzgvy

tailwind.config.js

module.exports = {
  theme: {
    backgroundColor: (theme) => ({
      ...theme('colors'),
      primary: 'black',
      secondary: '#ffed4a',
      danger: '#e3342f'
    })
  },
  plugins: []
}

index.js

import tw from 'twin.macro'
const TwDiv = tw.div`flex min-h-screen text-white bg-primary`
const App = () => {
  return <TwDiv>Hello</TwDiv>
}
export default App

[ben-rogerson]

What you're seeing here is the Babel cache in action. It seems to affect Gatsby and Next.js the most and it's a little annoying to say the least. It will only be experienced during development and never production builds.

The fix:
After modifying your tailwind config and restarting your server you need to make a change in the code to force a Babel to update it's cache.