Tailwind Custom Colors Not recompiled with Twin.macro and styled component

[Ysrbolles]

I'm trying to use a custom color, but I got a problem when I change the color on the tailwind config, Twin.macro does not recompile the style,

p.s: it's worked fine when I use it with className

// tailwind.config.js
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  important: true,
  theme: {
    extend: {
      colors: {
        // primary: '#00bcd4',
        primary: '#fde047',
      },
    },
  }
}

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'styled-components',
    autoCssProp: false,
  },
}

// .babelrc.js
module.exports = {
  presets: [['next/babel', { 'preset-react': { runtime: 'automatic' } }]],
  plugins: ['babel-plugin-macros', 'babel-plugin-styled-components'],
}

Example of usage

<div className="text-primary">Hello </div> // Color change
<div tw="text-primary">#Dégage_Akhannouch</div> // Color does not change

[EduardoBautista]

@Ysrbolles Do you have the twin.macro import at the very top of the file where the color change is not happening?

import "twin.macro"

[Ysrbolles]

Yes, @EduardoBautista, I import it globally, I'm using storybook, so I import it in the preview file, but still didn't work.

p.s: When I use it with the styled component, the color change after changing something in the file and saving it.

[EduardoBautista]

Are you importing the styled component globally as well? And this issue is only in storybook and not anywhere else?

[Ysrbolles]

Even if I import it into the file where the color change, it's still the same problem, and it's not only for storybook, even with nextJs.

[ben-rogerson]

Sometimes babel caching gets in the way, in Next you may need to break the cache sometimes by:

• stop the dev server
• remove the .next folder
• start the dev server

[Ysrbolles]

@ben-rogerson I've tried doing this several times but got the same result, I'll try to create an example on codesandbox or something, to put you in the context.

[Ysrbolles]

Hello @ben-rogerson @EduardoBautista, You can find here an example of the problem I have :

https://codesandbox.io/s/twin-macro-example-mnbhkv

After the project is finished the build, please try to change the color on tailwind.config.js

// primary: "#0070f3"
primary: "#ffc107"

p.s: if there is a problem with codesandbox, check the main repository here:

https://github.com/Ysrbolles/twin.macro-example

Thank you.

[EduardoBautista]

The sandbox changes colors correctly after updating the config.

[Mldamico]

This is happening to me. If i write a custom color in classname it works but if i want to put it inside tw i got an error (color-name was not found). This thing only happen using Vite. Doing the same with CRA works fine.

[ben-rogerson]

@Mldamico Assuming tailwindcss and twin are using the same tailwind.config, that sounds like a configuration issue.

Please test with the latest rc:

npm i twin.macro@rc

[Indeedornot]

The sandbox changes colors correctly after updating the config.

Odd, for me it does not, similiar to how it is in my project

I even tried the rc

[ben-rogerson]

v3 has some new de-caching features - feel free to reopen if there's still issues