Currently, I am in the process of working on a project using Next.js and Tailwind CSS with the goal of creating a responsive website.
One issue I am facing involves a specific component:
<div className="flex md:hidden">The intention is for this div to initially display as flex, but then hide once it reaches a screen size of "md". However, it seems to be staying hidden regardless, and the flex property is never being applied as expected.
A similar problem occurs in another instance:
`<div className="bg-red-200 xs:bg-blue-500 sm:bg-pink-600 md:bg-green-400 lg:bg-gray-50"`
In this case, only the background color specified for the "md" screen size is being displayed across all screen sizes during testing.
I have attempted utilizing custom values, but unfortunately, this has not resolved the issue. Below is an excerpt from my tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
screens: {
'xs': '320px',
'sm': '576px',
'md': '960px',
'lg': '1440px',
'xl': '1280px',
'2xl': '1536px',
},
extend: {},
},
plugins: [],
}
Despite extensively reviewing documentation, various StackOverflow inquiries, and watching numerous YouTube tutorials, I am still unable to pinpoint why this issue persists. Any assistance or insights you could provide would be greatly appreciated. Thank you.