Multiple tailwind configurations for one website

[avigoldman]

Hey team 👋
I'm using Next.js to build a combo marketing website and web app. I'd like to use tailwind for both parts, but with different configurations since they have different base font sizes, different spacings, etc.

Is there a way to have two different tailwind configs apply for different pages in Next.js or is there a better way to approach this?

[adamwathan]

I think you're only truly integrated option will be digging into customizing the webpack config and manually configuring two instances of postcss-loader that look at different sources and have an inline configuration so you can pass in different options unfortunately.

Another option is to compile your CSS out of process (using the Tailwind CLI or similar) and just compile those files using dedicated scripts. You can have a tailwind.app.config.js file and a tailwind.marketing.config.js file and just pass those names to the Tailwind CLI on the command line.

[avigoldman]

Gotcha, thanks!

[rezamirzapour]

how can we customize webpack to have multiple instance?

[berksafran]

Interested.

[wongjn]

You could consider:

• Using the @config directive.
• Setting the export of postcss.config.js as a function, which can receive the current CSS file being processed as part of its arguments. You could then configure the PostCSS plugins dependent on the arguments passed.

[williamtstanley]

can you expand on the setting postcss.config.js to be a function? I am having trouble getting it working with 2 config files 1 for admin and 1 for client side tailwind.configs.

[jlurena]

also interested in this! did you come up with a solution?

I've sucessfully bundled multiple tailwind configs, however because I am using the same "class" names on my tailwind config, they collide.

ie:

// tailwind.configA.js
module.exports = {
  textColors: { blue: 'blue' }
}

// tailwind.configB.js
module.exports = {
  textColros: { blue: 'lightblue' }
}

In my case, BOTH configs are bundled into a css file, and only the last one is applied (naturally)

[williamtstanley]

We are also trying to get multiple-configs working. Our setup has vite and postcss transpiling everything. If I use the config directive pointing to 2 different config files it fails with an error: [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config')

My assumption is some issue with relative pathing making it unable to find the config as defined.

@config "../../../tailwind.admin.config.js"

Does anyone have a working setup with the css entry somewhat deeply nested compared to the config?

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

[matijagrcic]

You can do the following if you want to change the config for site based on .env variable.

// tailwind.config.js
import { XXX_TAILWIND_CONFIG } from './tailwind.yyy.config';
import { YYY_TAILWIND_CONFIG } from './tailwind.yyy.config';

module.exports = process.env.NEXT_PUBLIC_BRAND_NAME === 'XXX' ? XXX_TAILWIND_CONFIG : YYY_TAILWIND_CONFIG;

Your postcss.config.js stays the same, and no changes needed in globals.css also.

If you're only interested in entry per file then the easiest is to use the built in @config directive.