Webpack with Tailwind CSS JIT integration - wordpress

Question

I'm currently having a hard time integrating the Tailwind JIT compiler with Webpack.js.
At the moment almost everything is working (custom colors, custom fonts, custom media queries etc...) except for the JIT compiler. Anyone has a clue what I'm doing wrong? (running on a Wordpress environment)
Thanks in advance!
EDIT: Based on the answer of Karl Hill I updated my dependencies, debugged most of it but JIT Compiler is still nog active (should be activated by default in tailwindcss 3.0 ?) Anyone has an idea?
functions.php
<?php
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script('main', get_stylesheet_directory_uri() . '/assets/dist/main.bundle.js', [], '1.0.0', true);
wp_enqueue_style('main', get_stylesheet_directory_uri() . '/assets/dist/main.css', [], '1.0.0', 'all');
});
Package.json
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "TAILWIND_MODE=watch webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.13",
"css-loader": "^6.7.3",
"postcss": "^8.4.21",
"postcss-loader": "^7.0.2",
"style-loader": "^3.3.1",
"tailwindcss": "^3.2.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}
postcss.config.js
module.exports = {
plugins: [
require('tailwindcss')("./tailwind.config.js"),
require('autoprefixer'),
]
};
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"**/*.php",
"*.php",
],
theme: {
screens: {
sm: '320px',
md: '768px',
lg: '1024px',
xl: '1920px',
},
extend: {
colors: {
customBlue: '#0F1D51',
customBeige: '#CBAD7E',
customEgg: '#FFF9EF',
},
borderWidth: {
'3': '3px',
},
fontSize: {
'base': ['1rem', {
lineHeight: '2rem',
letterSpacing: '-0.01em',
}],
'xl': ['1.25rem', {
lineHeight: '2rem',
letterSpacing: '-0.01em',
}],
'4xl': ['2.5rem', {
lineHeight: '1',
letterSpacing: '-0.01em',
}],
'7xl': ['4.875rem', {
lineHeight: '1',
letterSpacing: '-0.01em',
}]
},
fontFamily: {
sans: [
'"Roboto"',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
},
},
},
plugins: [],
}
webpack.config.js
const path = require('path');
module.exports = {
mode: "development",
context: path.resolve(__dirname, "assets"),
output: {
filename: "main.bundle.js",
path: path.resolve(__dirname, "assets/dist")
},
watch: true,
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
}
}
]
}]
}
}

Answer 1

Upgraded tailwind css to version ^3.2.4.
Works like a charm now.