Passing custom tailwind config file to postcss loader

Question

In my project I want to generate 2 tailwind files.

1. Frontend file, no prefixes
2. Admin file, all classes prefixed

I have added 2 config files:

• tailwind.config.js
• tailwind.admin.config.js

Inside tailwind.admin.config.js I have added the property:

prefix: 'tw-',

The problem is in webpack I am unable to specify the alternative config inside my rule. No matter what I do it always uses the tailwind.config.js file.

Here is my webpack rule for the amdin file:

{
    test: /\.css$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
        },
        {
            loader: 'css-loader',
            options: {
                importLoaders: 1,
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        require('precss'),
                        require('tailwindcss')('./tailwind.admin.config.js'),
                        require('autoprefixer'),
                    ]
                }

            },
        }
    ],
},

the format require('tailwindcss')('./tailwind.admin.config.js'), is only one I have seen for specifying the config file but it is not working inside postcss-loader. It always uses default file instead.

How do I specify the exact tailwind config to use inside webpack?

Answer 1

It seems that if you have any file named as derfault config file it will always use them no matter what you do. Renaming the default files to something else made it actually take the file I was passing it.