Twin.macro: Is there anyway to override tailwind config values directly while using instead of changing the file ?

[owaiswiz]

I know there is an API like ThemeProvider but afaik, it only works for reading values.

For example, If I wanted to override the color palette from a specific react component, such that all future references using tw to a color uses the modified color palette. Is something like that possible?

I guess a much simpler explanation to this would be - can I specify the path to the tailwind.config.js to be used directly inside my application logic instead of referencing them via babel-plugin-macros.config.js ?

If I understand correctly, loading and parsing config happens during the babel compilation phase, so something like this might not even be possible.

It doesn't even have to be a public API, I just want to know if some tinkering with the source will help me achieve that?

[ben-rogerson]

can I specify the path to the tailwind.config.js to be used directly inside my application logic instead of referencing them via babel-plugin-macros.config.js ?

This isn't possible with the tw prop at the moment but here's what you could try.

I could imagine usage would be something like this:

import { customPalette } from 'twin.macro'
customPalette`classes`

Then in your tailwind.config.js, you'd introduce a new entry, eg: customPalette: { ... }.

You'd then add some logic that works with the new import - just like the tw prop but also merges the customPalette entry into the existing Tailwind theme.

Hopefully, most of that logic could be done within macro.js - but perhaps wait until the next release as I've tidied that file up a bit (currently it's a bit of a mess).

[owaiswiz]

Thank you very much for your help.

If I understand correctly. I'd still have to add the entry customPallete: {...} to the tailwind.config.js that is referenced in babel-plugin-macros.config.js right ? That's what I am trying to avoid.

An example use case is: Imagine someone building a component library using twin.macro. All the colors used in this would be the default palette or as specified in the tailwind.config.js.

Now if the user of the library want's to modify the color palette, they wouldn't have access to the tailwind.config.js file that is being used by the component library, so I don't think they would be able to do that unless they made a modification and rebuilt the library.

So that was the reason why I was looking for something like this where I could allow users to directly override certain settings on App initialization ( something like library.setTailwindConfigPath() ) but I think that won't be possible.

[ben-rogerson]

I see, well perhaps you could modify this file to go looking for the users custom config after it's retrieved the default config. Then you could look at merging the users' data into the library config? Not 100% sure about this - you'd have to try :)

[owaiswiz]

Thank you very much. Yeah that is what I think would work best. Although I feel there might be some extra config needed on the user side, because if they have already installed the package, babel (if it is needed) by default would ignore all packages in node_modules. so even if it resolves I guess it wont be used and the already built components/files will be used, but yeah I am not sure either, I've to try.

Closing this. Thank you very much for your help again. :+1: :)