Tailwind responsive is not working using width

Question

I am new to Tailwind CSS.

I am creating layout using flex. I want to make the right section width 50% for desktop so I used (md:w-50). and I want to use width of 75% for mobile so I used (w-75). the expected behavior for me is small screen will apply width of 75% and if screen gets bigger md:w-50 will override the w-75 – am I understand that right?

I noticed some behavior that I don't understand that w-75 property has !important by default:

I want to create this:

Desktop(right section width is 50%):

Mobile(Bottom section width is 75%):

Classes for section for width:

I am getting this,

Desktop:

Mobile:

Width is 75% whatever screen size is.

Thanks.

Answer 1

you can use Classes w-[50%] w-[75%]