I'm trying to add responsive padding to a component. Since Tailwind CSS is mobile-first, I'm defining my mobile padding to p-3 and screens at "md" and greater widths should use p-5. However, as you can see, the p-3 class is overriding the md:p-5 class. How can I fix this?
<div className="flex-column flex rounded-3xl bg-slate-100 p-3 md:p-5">
Developer tools image:
Nothing seems to be wrong with the code . It works properly which you can check below.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex-column flex rounded-3xl bg-slate-100 p-3 md:p-5"></div>check with multiple screen sizes.
You can check that screen size you are watching the chrome developer tools logs.
The md breakpoint comes into action when screen width is from 768 px to 1023px. So check this .
If you need smaller/narrower screen width then you can use sm breakpoint also which comes into action when screen width is from 640 px to 767px