Ability to pass in Tailwind config object to build tailwind-merge config object

[brandonmcconnell]

It'd be pretty sweet if there were a way to more simply pass our entire tailwind.config.cjs export object into tailwind-merge config, maybe via a helper function that performs any needed transformations, in order to construct the extended tailwind-merge config.

It'd be much easier for users to maintain a custom tailwind-merge config that way, I'd think.

[dcastil]

Theoretically that would be possible, but there are a few challenges with that.

1. The tailwind.config.js is meant to run at buildtime in Node.js whereas tailwind-merge runs at runtime in the browser. That means the Tailwind config would need to work in both environments. There is a risk that someone might call some Node.js APIs in there, resulting in a broken build of the browser code, a runtime error in the successfully built browser code, or even polyfilled Node.js APIs in the browser code (Webpack does/did that famously).
2. tailwind-merge would need to add quite a lot of code to be able to work with all the theme keys Tailwind uses (check out how big the default Tailwind config is here). At 6.3 kB minified+gzipped tailwind-merge is already very big and I would like not to make it substantially bigger.

I think there might be a better way to derive the tailwind-merge config from the Tailwind config programmatically. Maybe there is a way to create a Tailwind plugin which could generate the tailwind-merge config code. Or I could write a CLI tool for the tailwind-merge codegen which could be added to the build script of the browser code. But keeping it at buildtime would solve the two points from above.

Now the only question is when I'd have time for this. 😄 I can't give any promises for this unfortunately.

[brandonmcconnell]

@dcastil That makes sense. It would certainly lower the bar of entry for Tailwind power users with more sophisticated configs, but then again, they probably have more incentive to set it up properly.

I guess I'm trying to think if a way to make the two work together without manually writing rightly coupled code like a standard twMerge config.

I really appreciate your willingness to help with btw, let alone consider it!

When talking about this idea with a colleague earlier, they shared this link with me:
https://tailwindcss.com/docs/configuration#referencing-in-java-script

Tailwind’s native resolveConfig function generates a s returns a fully merged version of your configuration object, which may be easier to work with, so you don’t have to worry about any of the compile-time logic going on in there. Essentially the “end product” of the Tailwind config.

Curious to hear if you think that’d work 👏🏼

[dcastil]

Yeah if I'd build a plugin, I'd most probably use resolveConfig to get the keys I want. It's only important to do that at buildtime because the resolved config is easily more than 200 kB if stored in a JSON.

And I also think that writing the tailwind-merge config manually is the biggest pain of it. It's complicated and it relies on keys which you only find in https://github.com/dcastil/tailwind-merge/blob/v1.7.0/src/lib/default-config.ts. Most support requests I get are for this.