The max-width not works after install the lib

[damiaofranca]

I'm using tailwind in my project and I decided to use the lib, but after I installed the lib and made the wrapper with the withMT function, the classes for max-width, (for example: max-md:hidden) stopped working. if i remove the wrapper and it works again.

stack used: NextJs13.4.8

lib version : @material-tailwind/react "^2.0.5"

[northonDigitra]

I'm facing the same problem. Did you manage to solve, @damiaofranca?

[northonDigitra]

@timcreative, hey guys! Can you check this issue, please?

[damiaofranca]

I'm facing the same problem. Did you manage to solve, @damiaofranca?

Unfortunately not, as I was out of time to solve it I removed the lib and I'm using vanilla tailwind with flowbite lib.

[northonDigitra]

@sajadevo any chance of you looking this, please?

[shashankgpt]

Any idea, what is the issue? Is there any workaround

[SimonHaasnoot]

Can confirm this is an issue, have the same with the wrapper

[luccameds]

Hey!

I verify in many forums and documentation usind the MaterialTailwind and didn't find anything can help me.

But, I notice in a specific component to show when the window be in md, lg, xs...

You can use like that:

<p className="hidden lg:flex">
      Hello World! This is a long text that should be hidden on small.
</p>

So, the component will be hidden when the window is smaller lg, and will be shown bigger.

I hope to helped you 😊🙌

[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 '>