Enabling JIT breaks sourcemaps in webpack + PostCSS project

[evenfrost]

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.

[halkhalil]

**here is a workaround until JIT and sourcemaps work ( it is breaking as of v2.2.7) **

• need two config files (tailwind.config.js) one file with JIT enabled the other disabled.
• tailwind.css < @tailwind components; @tailwind utilities;
• styles.scss < @tailwind base; import xyz // and Load SCSS via globing / scss can have @apply
• and run two tasks to process style sheets

return src(${options.paths.src.css}/tailwind.css) .pipe(postcss([ require('postcss-import'), tailwindcss(options.config.tailwindjs) ]))

return src(${options.paths.src.css}/**styles.scss**) .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(postcss([ tailwindcss(options.config.tailwindnoJIT) ]))

and voila sourcemaps are working working with JIT and is blazing fast, styles sheets small as well :)

[evenfrost]

@adamwathan FYI, sourcemaps still not working with JIT enabled in 2.2.7.

[donaldhubduck]

Same here. Source maps won't work in JIT mode. I just tried to make a new simple project with webpack and tailwind just to try it out. If I dont use JIT then the source maps works. If I use the mode JIT then the source maps wont work.

I use Tailwind together with some CMS and some elements I cant add css classes to, so I have to use @apply to style those elements.

I added some screenshots down below to show my project and how it looks in firefox dev tools.

working source maps in firefox dev tools (JIT disabled)

broken source maps in firefox dev tools (JIT enabled)

error message in firefox dev tools (JIT enabled)

how I import tailwind files to my css

index.js in vscode

typography.css in vscode

[fishmi]

Same here.
Is there any prospect of fixing this problem. We would not like to do without the JIT, because we now also use arbitrary value support that only works with the JIT.
But working without SourceMap is also tedious.

[Frulko]

Same here too,
I tried some different configurations with different builder or method but I not found any solution and my comprehension about how jit works with sourcemaps is so limited that i cannot deep dive into code to inspect and get a solution to help :(

[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;
}

[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