JIT watch issue with Webpack and React element

What version of Tailwind CSS are you using?

v3.0.15

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

webpack 4.44.1, React 17.0.2, postcss 8.4.5

What version of Node.js are you using?

v12.5.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

Describe your issue

Hey guys

I have an issue with the JIT compiler of the Tailwind CSS v3 while I didn’t have the same issue when I used v2. But please note that I didn’t enable JIT in the v2.

The JIT compiler can not track changes and produce CSS from the classes added to the react element.

I tried to enable the TAILWIND_MODE=watch but it can not help.

Webpack config is as follows.

const webpackConfig = {
	mode: NODE_ENV,
	entry: {
		admin: './assets/js/dev/admin/index.js',
	},
	output: {
		filename: './assets/js/admin/[name]/index.js',
		path: __dirname,
		library: [ '[modulename]' ],
		libraryTarget: 'this',
	},
	externals,
	module: {
		rules: [
			{
				parser: {
					amd: false,
				},
			},
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				loaders: [ 'babel-loader' ],
			},
			{ test: /\.md$/, use: 'raw-loader' },
			{
				test: /\.s?css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					{
						loader: 'postcss-loader',
						options: { postcssOptions: postcssConfig },
					},
				],
			},
			{
				test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
				loader: 'url-loader',
			},
		],
	},
	resolve: {
		extensions: [ '*', '.js', '.jsx' ],
		alias: aliases,
	},
	plugins: [
		new CustomTemplatedPathPlugin( {
			modulename( outputPath, data ) {
				const entryName = get( data, [ 'chunk', 'name' ] );
				if ( entryName ) {
					return entryName.replace( /-([a-z])/g, ( match, letter ) =>
						letter.toUpperCase()
					);
				}
				return outputPath;
			},
		} ),
		new MiniCssExtractPlugin( {
			filename: './assets/css/[name]/style.css',
		} ),
	],
};

The Tailwind CSS config is:

const colors = require( 'tailwindcss/colors' );

module.exports = {
	important: '.asnp-app',
	prefix: 'asnp-',
	content: [
		'./assets/js/dev/**/*.{js,jsx,ts,tsx,vue,html}',
		'./assets/js/dev/**/*.jsx',
	],
	theme: {
		extend: {},
		colors: {
			transparent: 'transparent',
			current: 'currentColor',
			white: colors.white,
			black: colors.black,
			gray: colors.gray,
			rose: colors.rose,
			indigo: colors.indigo,
			green: colors.green,
			blue: colors.blue,
		},
	},
	plugins: [],
	corePlugins: {
		preflight: false,
	},
};

The postcss config is:

const autoprefixer = require( 'autoprefixer' );
const tailwindcss = require( 'tailwindcss' );

module.exports = {
	plugins: [
		require( 'postcss-import' ),
		require( 'tailwindcss/nesting' ),
		tailwindcss,
		autoprefixer,
	],
};

The package.json script is:

"scripts": {
		"prepack": "npm install && npm run lint && npm run test && npm run build",
		"build": "cross-env BABEL_ENV=production NODE_ENV=production webpack",
		"start": "cross-env NODE_ENV=development TAILWIND_MODE=watch BABEL_ENV=development webpack --mode development --watch --info-verbosity none",
		"lint": "npm run lint:php && npm run lint:css && npm run lint:js",
		"lint:php": "composer run-script phpcs .",
		"lint:css": "stylelint assets/css",
		"lint:js": "eslint assets/js --ext=js,jsx"
	},

React element code:

export default function Settings() {
	const [ settings, setSettings ] = useState( {
		name: 'Name',
	} );

	const updateSettings = ( field, value ) => {
		let update = Object.assign( {}, settings, { [ field ]: value } );
		setSettings( update );
	};

	return (
		<div className="asnp-mt-4 asnp-max-w-lg asnp-grid asnp-grid-cols-1 asnp-gap-6">
			<label className="asnp-block asnp-space-y-1">
				<span className="asnp-field-title">
					{ __( 'Name', 'easy-woocommerce-discounts' ) }
				</span>
				<input
					type="text"
					className="asnp-block asnp-text-field"
					value={ settings.name }
					onChange={ ( e ) =>
						updateSettings( 'name', e.target.value )
					}
				/>
			</label>
			<div className="asnp-flex">
				<div className="asnp-w-1/2 asnp-bg-rose-500">w-1/2</div>
				<div className="asnp-w-1/2 asnp-bg-indigo-500">w-1/2</div>
			</div>
			<div className="asnp-flex">
				<div className="asnp-w-1/2 asnp-h-10 asnp-bg-gray-500">
					w-1/2
				</div>
				<div className="asnp-w-1/2 asnp-h-10 asnp-bg-blue-500 asnp-text-white">
					w-1/2
				</div>
			</div>
		</div>
	);
}

In the above example when I change the color of an element with a class like asnp-bg-green-500 it does not take effect while I restart the npm start.

Thanks in advance for your help.

[reinink]

@codewp Thanks for sharing this. Reviewing your project’s dependencies, I can see that the css-loader package that you have installed is requiring PostCSS 7:

https://github.com/codewp/tl-tailwindcss-repro-7113/blob/64123d3e92eca7110370988f2b641ec2a23428da/package.json#L13

The best way to figure this out is by looking at your package-lock.json file, and then searching for all instances of "postcss": "^7. For example:

https://github.com/codewp/tl-tailwindcss-repro-7113/blob/64123d3e92eca7110370988f2b641ec2a23428da/package-lock.json#L1691

I’m going to close this issue, as it sounds like the culprit here is PostCSS 7. For anyone else who stumbles across this issue, be sure to review your dependencies for instances of PostCSS 7 👍

[codewp]

@reinink Thank you for your suggestion.

I created a reproduction and it worked. The reproduction is at the below repo. https://github.com/codewp/tl-tailwindcss-repro-7113

npm install
npm start

In the dist folder open the index.html

How can I detect that which dependencies are using postcss older versions?