Can't extend tailwind config

[CurralesDragon]

Hi, Love this! But having trouble getting the tailwind config to work.

Using with react. Tailwind works fine with the config if using className But when trying to use with emotion, tw always defaults to the 'default' config.

"babel-plugin-tailwind-components": "^1.0.0-alpha.0",
"tailwind.macro": "^1.0.0-alpha.10",
"tailwindcss": "^1.1.4",

module.exports = {
  tailwind: {
    styled: '@emotion/styled',
    format: 'auto'
  }
}

const text = tw.div`text-lg`

Everything seems to be working fine except its not pulling in any config.

testing config (make red green to test):

module.exports = {
  important: true,
  theme: {
    extend: {
      colors: {
        red: {
          100: '#f0fff4',
          200: '#c6f6d5',
          300: '#9ae6b4',
          400: '#68d391',
          500: '#48bb78',
          600: '#38a169',
          700: '#2f855a',
          800: '#276749',
          900: '#22543d'
        }
      }
    }
  },
  variants: {},
  plugins: []
}

I specifically require important: true

Using typescript and webpack (if that matters)

[CurralesDragon]

Ok so i pinpointed the problem... Firstly i need to delete the .cache in node_modules for deleting babel cache.

But because the macro only merged the config in production, this causes the problem:

  state.isProd = process.env.NODE_ENV === 'production';

As i set the NODE_ENV to dev when running in dev

[mhaagens]

Hi! I'm having the same issue, but can't seem to find any .cache folder in node_modules. Is that all you had to do to get it to work?

[CurralesDragon]

Hi! I'm having the same issue, but can't seem to find any .cache folder in node_modules. Is that all you had to do to get it to work?

Are you running with any env variables? Eg production / development?

[mhaagens]

No env variables, process.env.NODE_ENV is undefined. And if the folder isn't there then nothing should be cached anyways right? I have cacheDirectory: false in babel-loader as well. Really stumped on this one.

I see you have babel-plugin-tailwind-components installed, is that necessary? I'm using the PostCSS plugin and the tailwind.macro.

The extended classes work PostCSS, but not with tw``

[CurralesDragon]

If i remember right it could also be to do with the macro version.

Try version 1.0.0-alpha.10

Let me know

[mhaagens]

Already on 1.0.0-alpha.10 :sweat_smile:

[CurralesDragon]

Ah,

It could still be the env variable. As it only merges when it detects production env. So if its undefined it still won't merge.

I made a simple fork to remove this env check: https://github.com/nicwhitts/tailwind.macro-env-compatible

Give this a try

[mhaagens]

It's definitely using the tailwind.config.js, because if I delete it then it all crashes. But when I extend the config PostCSS picks up the new classes correctly, but the macro doesn't. If I change a value then PostCSS shows the new value, while the macro still uses the old one. So has to be something with caching, just can't find any folder with the cached version. Not caching in babel-loader and ts-loader doesn't cache AFAIK.

[mhaagens]

Didn't work either. Thanks for trying to help me out though :)

[mhaagens]

@nicwhitts Managed to get it solved. The problem was that babel-plugin-macros.config.js was not being picked up by babel-plugin-macros.

[CurralesDragon]

Glad to hear

[bblatnick32]

@mhaagens What did you change to get babel-plugin-macros.config.js to be picked up by babel-plugin-macros?