Tailwind max-*, max-[*], min-[*] modifiers for breakpoints do not work

[Nikolasgrizli]

The Tailwind generates modifiers not only for
sm:..., which are expanded into medias
@media (min-width: 640px) { ... } ...
but there are also reverse media queries, for example
max-sm, which is expanded into
@media not all and (min-width: 640px) { ... } ... .

Tailwind also supports custom queries, which are built like this

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
 <!-- ... -->
</div>

which is expanded into

@media (min-width: 320px) { text-align: center;}
@media not all and (min-width: 600px) { background-color: .... } 

When the material-tailwind library is installed, these features become unavailable, such styles are simply not generated.

My set:
package.json

 "dependencies": {
    "@heroicons/react": "^2.1.1",
    "@material-tailwind/react": "^2.1.9",
    "autoprefixer": "^10.4.17",
    "gatsby": "^5.13.2",
    "gatsby-plugin-image": "^3.13.1",
    "gatsby-plugin-manifest": "^5.13.1",
    "gatsby-plugin-postcss": "^6.13.1",
    "gatsby-plugin-react-svg": "^3.3.0",
    "gatsby-plugin-sharp": "^5.13.1",
    "gatsby-plugin-sitemap": "^6.13.1",
    "gatsby-source-filesystem": "^5.13.1",
    "gatsby-transformer-sharp": "^5.13.1",
    "postcss": "^8.4.33",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "smooth-scrollbar": "^8.6.2",
    "smooth-scrollbar-react": "^2.3.0",
    "tailwindcss": "^3.4.1"
  },

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
content: [
  `./src/pages/**/*.{js,jsx,ts,tsx}`,
  `./src/components/**/*.{js,jsx,ts,tsx}`,
],
theme: {
  extend: {
  ....
   },
plugins: [],
});