Twin.macro: colors from tailwind config are not found

[BjoernRave]

I am trying to add some primary and secondary colors to tailwind, however twin.macro doesn't recognize them.

I couldn't find any information about whether I need to configure anything special to make twin.macro recognize the tailwind.config.js

//tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: '#a273ff',
          200: '#935bff',
          300: '#8344ff',
          400: '#742cff',
          500: '#6415FF',
          600: '#5a13e6',
          700: '#5011cc',
          800: '#460fb3',
          900: '#3c0d99',
        },
        secondary: {
          100: '#7c8ba1',
          200: '#667892',
          300: '#506582',
          400: '#3a5173',
          500: '#243E63',
          600: '#203859',
          700: '#1d324f',
          800: '#192b45',
          900: '#16253b',
        },
      },
    },
  },
  plugins: [],
}

Error:

Uncaught ModuleBuildError: Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
MacroError: /Users/bjoern/projects/speakeroo/web/pages/index.tsx: 

�[38;2;255;131;131m✕ �[38;2;255;211;211mbg-primary-500�[39m�[38;2;255;131;131m was not found�[39m

    at errorSuggestions (/Users/bjoern/projects/speakeroo/web/node_modules/twin.macro/macro.js:4616:13)
    at bg (/Users/bjoern/projects/speakeroo/web/node_modules/twin.macro/macro.js:3953:3)
    at callPlugin (/Users/bjoern/projects/speakeroo/web/node_modules/twin.macro/macro.js:4649:10)
    at handleCorePlugins (/Users/bjoern/projects/speakeroo/web/node_modules/twin.macro/macro.js:4674:10)
    at Object.corePlugin (/Users/bjoern/projects/speakeroo/web/node_modules/twin.macro/macro.js:4728:40)
    at /Users/bjoern/projects/speakeroo/web/node_modules/twin.macro/macro.js:4756:32
    at Array.reduce (<anonymous>)
    at getStyles (/Users/bjoern/projects/speakeroo/web/node_modules/twin.macro/macro.js:4687:31)
    at /Users/bjoern/projects/speakeroo/web/node_modules/twin.macro/macro.js:4875:38
    at Array.forEach (<anonymous>)

[ben-rogerson]

Looks like your tailwind.config.js isn't being read - have you got it sitting in the root project directory?

If not, you can adjust the path with the config option.
Here's an example in a component library where I had to traverse up a few directories to use a common tailwind.config.js.

I also checked your config - all good there 👍

import tw from "twin.macro";

tw`bg-primary-500`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgba(100, 21, 255, var(--tw-bg-opacity))"
});

[BjoernRave]

@ben-rogerson ah, I realized I had set the path config, because I copied it from one example, it's working now. Thanks for the quick response and your work on this lib, I appreciate it :)