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

[Nikolasgrizli]

trafficstars

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: [],
});

[erennyuksell]

same problem

[dananjaya6005]

[https://www.material-tailwind.com/docs/react/installation check](https://www.material-tailwind.com/docs/react/screens#adding-new-breakpoint](https://www.material-tailwind.com/docs/react/screens#adding-new-breakpoint) seems like they not included in this libary

[dananjaya6005]

In your tailwind.config file you can edit like this and add custom max:[] for brakepoint.

theme: {
   extend: {
     screens : {
       maxsm : {max : '640px'},
       maxmd : {max : '768px'},
       maxlg : {max : '1024px'},
       maxxl : {max : '1280px'},
       max2xl : {max : '1536px'},
       
     }
   },
 },

Then use like this ....

<div className='mx-10 maxlg:mx-1 '>