Add @config support

[thecrypticace]

The new @config rule lets you specify a config file relative to your CSS. This, additionally, lets you have multiple config files for separate CSS entry points — oftentimes found in monorepos with multiple packages.

This means that you can now do this and it will look for the config file next to the CSS file:

@config "./tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

This even works with postcss-import if you have a @config directive in an imported file. In which case the config will be relative to that imported CSS file. If you do not have an @config directive we will still use the config file specified by the postcss plugin for that CSS file.

Warning
This does not work the way you may expect with imports + preprocessors like Sass/LESS/etc… as those generally compile to one blob of CSS that's passed to PostCSS so it will likely be relative to the Sass entry file instead.

Fixes #6517

[JamieGarcia123]

So would this be ideal if we have monorepo for mulitple clients but need different style sheets based on that company? for instance the color themes will be different from client to client

[zommerberg]

So would this be ideal if we have monorepo for mulitple clients but need different style sheets based on that company? for instance the color themes will be different from client to client

I am also interested in that, especially if we dynamically fetch client specific data (fonts/colors) after we have built and deployed the app

[eYinka]

So would this be ideal if we have monorepo for mulitple clients but need different style sheets based on that company? for instance the color themes will be different from client to client

I am also interested in that, especially if we dynamically fetch client specific data (fonts/colors) after we have built and deployed the app

This is my use case at the moment. Now I am thinking if it's possible to store the path to each client's custom config in an ENV file and then dynamically load it somehow. Wild thoughts maybe?

Edit:

Another way to look at it is to do it the way it's stated in the official docs and then import the CSS dynamically. Create multiple tailwind configs and multiple CSS files to reference the corresponding configs.

In the app:
if tenant === 'xyz', import xyz-css.css. Javascript dynamic import could work here...

All just in my head for now. Maybe I'd try it and report my findings.

[fabswt]

link to the docs: https://tailwindcss.com/docs/functions-and-directives#config