[v4] webpack-postcss-tailwind with prefix is working in development mode but not in production mode

[fnep]

I'm facing an issue after updating from v3 to v4.0.9.

I run tailwind via the postcss plugin in webpack. This is a minimal example to make it reproducible:

---

webpack.config.js

module.exports = {
    entry: {
        test: "./test.scss",
    },
    module: {
        rules: [
            // sass
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: "postcss-loader",
                        ident: "postcss",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env",
                                        {
                                            // https://stackoverflow.com/a/66966232
                                            // Preserve logical properties and values
                                            stage: 3,
                                        },
                                    ],
                                    "@tailwindcss/postcss",
                                ],
                            },
                        },
                    },
                    {
                        loader: "sass-loader",
                    },
                ],
            },
        ],
    },
};

test.html

<div class="tw:invisible"></div>

test.scss

@import "tailwindcss" prefix(tw);

---

Please note i use the prefix "tw".

This produces a JavaScript file instead of a CSS File. Normally there is also MiniCssExtractPlugin involved, but to avoid any other influence i removed it.

---

If i now run npm exec webpack build -- --mode=development, the dist/test.js contains: .tw\\:invisible { visibility: hidden; }.

But running npm exec webpack build -- --mode=production it does neither contain the invisible class nor any tailwind related content.

Not sure if this is a bug or if i just do some config mistake here.

---

When i remove the prefix from the test.scss and test.html i get a warning during the compilation

Deprecation Warning on line 0, column 8 of file:///test.scss:0:8:
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

.... but the resulting js file contains a the required class.

[wongjn]

Could you provide a git repo that reproduces the unexpected behavior please? As an aside Tailwind isn't meant to be used with Sass.

[fnep]

This is a very valuable hint! I moved tailwind into a css file, where it runs whithout the sass loader, and now it is working again in production. I can easily do this in my project to avoid the issue. Thank you!

So it probably has something to do with the scss-loader handling the import statement different.

I created a repository for it anyway, but im not sure if this is then a tailwind business.

-> fnep/tailwind-16952-issue