from "postcss-is-pseudo-class" plugin: Complex selectors in '' can not be transformed to an equivalent selector without ':is()'

I am having django project with cookiecutter. I have frontend pipeline setup with webpack, and using flowbite.

Everything worked well until I add a toggle button from the flowbite.

After I add this button, I get these errors.

Initially I thought it was the tailwindcss or flowbite version issue, so update all the packages, but it was not solved.

What I could assume is issue from the postcss or the webpack configs.

Here is my postcss config.

module.exports = {
    plugins: {
      "postcss-import": {},
      "tailwindcss/nesting": {},
      tailwindcss: {},
      autoprefixer: {},
    },
  };

And here is my webpack configs.

const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const Terser = require("terser");

const exclusions = "/node_modules/";

module.exports = {
  target: 'web',
  context: path.join(__dirname, '../'),
  entry: {
    app: "./frontend/js/app.js",
  },
  output: {
    path: path.resolve(__dirname, "../static"), // Should be in STATICFILES_DIRS
    publicPath: "/static/", // Should match Django STATIC_URL
    filename: "js/[name].js", // No filename hashing, Django takes care of this
    chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
  },
  module: {
    rules: [
      {
        test: /.*/,
        include: path.resolve(__dirname, "frontend/images"),
        exclude: exclusions,
        options: {
          context: path.resolve(__dirname, "frontend/"),
          name: "[path][name].[ext]",
        },
        loader: "file-loader",
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        include: path.resolve(__dirname, "frontend/fonts"),
        options: {
          context: path.resolve(__dirname, "frontend/"),
          outputPath: "fonts/",
        },
        loader: "file-loader",
      },
      {
        test: /\.s?css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['postcss-preset-env', 'autoprefixer', 'pixrem'],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new BundleTracker({
      path: path.resolve(path.join(__dirname, '../')),
      filename: 'webpack-stats.json',
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[id].css",
    }),
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new CopyWebpackPlugin({
      patterns: [
        { from: "frontend/images", to: "images" },
        { from: "frontend/fonts", to: "fonts" },
      ],
    }),
  ],
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx'],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false,
          },
        },
        extractComments: false,
      }),
    ],
  },
};

And here is my package.json just in case need to see versions.

{
  "version": "0.1.0",
  "main": "tailwind.config.js",
  "dependencies": {
    "@tailwindcss/forms": "0.5.9",
    "@tailwindcss/typography": "0.5.15",
    "flowbite": "^2.5.2",
    "html-loader": "5.1.0",
    "html-webpack-plugin": "5.6.3"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.20",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^12.0.2",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.9.2",
    "node-sass-tilde-importer": "^1.0.2",
    "pixrem": "^5.0.0",
    "postcss": "^8.4.49",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.1.1",
    "tailwindcss": "^3.4.16",
    "terser-webpack-plugin": "^5.3.10",
    "webpack": "^5.97.1",
    "webpack-bundle-tracker": "^3.1.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0",
    "webpack-merge": "^6.0.1"
  },
  "engines": {
    "node": "20"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "scripts": {
    "dev": "webpack serve --config webpack/dev.config.js",
    "build": "webpack --config webpack/prod.config.js"
  }
}

I have been searched for long to resolve this issue, but couldn't find the solution. Please help.

You are running postcss-preset-env, which includes a transpiling plugin for the is() selector.

This plugin can not transform the .foo ~ .bar:is(.dark *) pattern as found in .peer: checked ~ .dark\:peer-checked\:bg-blue-700:is(.dark *) {

It tries to transform this selector because your configuration indicates that you want to support older browser versions without native support for the :is() selector. Setting or updating configuration with a browserslist targeting more modern browser versions is one way of "resolving" this issue.

Given that this selector is likely produced by other tools like Tailwind it seems unlikely that there is another way to eliminate this error.