Multiple Tailwind config files

[dgwyer]

Trying to find the best (simplest!) way of handling multiple Tailwind config files.

I've set up a very simple test Tailwind project that uses webpack and postcss plugins to process Tailwind classes. The project uses the postcss-multiple-tailwind postcss plugin that wraps the Tailwind postcss plugin.

It almost works but doesn't recompile the Tailwind classes when JS files are edited. It may be the way the custom postcss plugin is calling the tailwind postcss plugin but I'm not sure:

const tailwindcss = require("tailwindcss")(file);
return postcss(tailwindcss.plugins).process(root, { from: undefined });

If I can't get the custom postcss plugin working properly I'd love to be able to find an alternative way to use multiple tailwind config files in a project.

Any help or guidance is greatly appreciated!

Demo Tailwind project: https://github.com/dgwyer/multiple-tailwind-configs
Main issue (more details): dgwyer/multiple-tailwind-configs#1

[adamwathan]

Just replying super quick here between other stuff but you should be able to do this right in your webpack config by adding two instances of postcss-loader that test against different files.

Here's a really old and likely outdated example from an old gist I remember making but hopefully enough to give you an idea:

https://gist.github.com/adamwathan/7796ee4dced569cc31d5cf83c62b8f89#file-webpack-config-js

[brandonmcconnell]

Would a more appropriate approach to this—now—be using Tailwind CSS presets?

Just want to make sure I use the right tool for the job as I'm in a similar spot now, needing to use the same config, roughly, for two different portals on my site, with slight variations of colors and some styles.

[dgwyer]

@ovannavas The core need in my case is to have multiple config files so I can target specific source folders to build Tailwind CSS for different parts of the project. e.g. frontend styles, admin styles.

@adamwathan I actually have this working in Tailwind CSS core now. If the default tailwind.config.js file is not found (i.e. in the root of the project) or you haven't specified a custom location for it then it looks in the current entry point directory.

This allows you to compile Tailwind to multiple targets seamlessly, without having to customize your project barely at all. The postcss.config.js doesn't have to be modified. You just 'drop' in Tailwind config files for each entry point and it works out of the box!

I've tested this using webpack as the build system but will also test with others (parcel, vite etc.). I can submit a PR for this but as a first time contributor I'm not 100% sure of the process.

[adamwathan]

Missed this comment somehow, I like the idea of looking for the config file closest to the CSS file by default 👍🏻 maybe we could switch to that behavior for v4.

[dgwyer]

Sounds good!

[dgwyer]

Just as an update to anyone that needs multiple Tailwind config files to work, the postcss-multiple-tailwind PostCSS plugin has now been patched and works as expected.

I still think it would be a nice addition to Tailwind core but at least we have a working solution for now. It just means you need to replace the Tailwind PostCSS plugin with the custom one to handle multiple config files.

[Suriteka]

And it's finally in core ! Thanks to V3.2 and #9405

[kmergen]

Thanks. That is a very important feature to keep your css lightweight. Imagine you have a frontend and the backend in the same application. (backend css is often bigger) and without having more config files you have all the css from the backend in your frontend.
Thanks again, I use this very often.

[MelancholYA]

Hello guys , i think i came up with a simpler way to do this , There are two main ingredients in this strategy:
Tailwind’s @config directive — to load different Tailwind config files.
Next.js layouts — to scope styles to specific parts of the app.
Together, they allow you to inject design systems per layout — isolated and conflict-free.

i wrote an article about it and a demo if anyone is intrested ,
article : https://yacine-ouardi.vercel.app/blog/posts/migrate-design-systems-gracefully-with-multiple-tailwind-css-configs-in-next-js
demo : https://github.com/MelancholYA/taiwlind-mutliconfig