Enabling JIT breaks sourcemaps in webpack + PostCSS project

What version of Tailwind CSS are you using?

2.2.6

What build tool (or framework if it abstracts the build tool) are you using?

webpack 5.46.0, postcss 8.3.6

What version of Node.js are you using?

14.17.0

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

Reproduction repository

⠀

Describe your issue

When using Tailwind’s JIT option for processing PostCSS in the webpack project, source maps are not being shown in the Chrome DevTools (but still generated in the output CSS file). The value of devtool option in the webpack config doesn’t matter, the result is the same.

With config like this:

  purge: [
    './src/**/*.tsx',
  ],
  mode: 'jit',

Source maps don’t get processed:

When disabling the JIT option:

  purge: false,

Source maps are being processed properly, and the original file is shown in Chrome DevTools:

I’ll bootstrap a repro repo if a more thorough investigation is needed.

[MichaelRushton]

Source maps are also not working properly in 3.0.19.

src/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src/js/app.js

import '../css/app.css'

webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = (env, argv) =>
{

  process.env.NODE_ENV = argv.mode

  return {
    devtool: 'source-map',
    entry: {
      app: '/src/js/app.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: 'babel-loader'
        },
        {
          test: /\.css$/,
          exclude: /node_modules/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
          ],
        }
      ]
    },
    optimization: {
      minimize: true,
      minimizer: [
        `...`,
        new CssMinimizerPlugin(),
      ],
    },
    output: {
      chunkFilename: '[name].[contenthash].js',
      clean: true,
      filename: '[name].js',
      path: path.resolve(__dirname, 'public/dist')
    },
    plugins: [
      new MiniCssExtractPlugin({filename: '[name].css'})
    ]
  }

}

The generated public/dist/app.css.map includes this section:

"sources":["webpack://@test/test/./src/css/app.css","webpack://@test/test/./src/css/%3Cinput%20css%20doRbU6%3E","webpack://@test/test/<no source>"]

Using Chrome DevTools all the Tailwind CSS rules show as <no source>:1

[Xeevis]

Adding any regular css rule or even a simple comment will generate sourcemaps correctly.

<div class="with-sourcemap"></div>
<div class="with-another-sourcemap"></div>
<div class="no-sourcemap-here"></div>

.with-sourcemap {
  background-color: red;
  @apply h-4 w-4 bg-green-500;
}

.with-another-sourcemap {
  /* sourcemap will work here too */
  @apply h-4 w-4 bg-red-500;
}

.no-sourcemap-here {
  @apply h-4 w-4 bg-black;
}