Having trouble with my custom breakpoints.
For instance, I attempted the following:
<div className="flex flex-row gap-5 mb-5 md:ml-15 sm:ml-15">
...
</div>
The margin is not being applied on small and medium screens. Here are the themes from my tailwind.config.ts file:
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
},
},`
I implemented these breakpoints after encountering a similar issue on stackoverflow, but still haven't resolved the problem.