webpack shows incorrect sourcemaps when using tailwibd directives

I'm using TailwindCSS 2.1+ in mode: 'jit' with SCSS, and currently facing the issue. Let say I created class .red

.red {
    color: red;
} 

Devtools shows it came from _elements.scss:28 which is correct. But when I use @apply

.red {
    @apply text-red-500;
} 

it shows %3Cno%20source%3E:1 and so on. Any tailwind style are not being tracked 'properly'.

My webpack.config.js (simplified)

const config = {
    devtool: isProd ? false : 'eval-cheap-source-map',

    module: {
        rules: [
            {
                test: /\.(s?)(a|c)ss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath,
                        },
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: isProd ? {
                                    'autoprefixer': {},
                                    'cssnano': { preset: 'default' },
                                } :
                                    {},
                            },
                        },
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
            },
        ],
    },
}

Options for loaders like sourceMaps, importLoaders didn't help.

postcss.config.js

const tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss(),
    ],
};

Is there anything I could do to show correct file and line from sourcemaps when using @apply?