I'm just getting started with Tailwind CSS and I decided to build the user interface of my nextjs application using a "mobile first" approach like everyone suggests. I got the flex direction and background color working perfectly on mobile screens, so it seems like Tailwind CSS is importing correctly into my nextjs application. However, when I resize the screen, the flex direction and background color of the navigation bar do not change accordingly.
Here's the code for the Navbar:
export default function Home() {
return (
<div>
<Head>
<title>Tailwind CSS Tutorial</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<header className="bg-gray-700 shadow-md sm:bg-red-900">
<nav className="flex flex-col items-center sm:flex-row sm:justify-between sm:items-left">
<div className="w-screen text-center px-5 py-2 text-white border-b sm:border-b-0 sm:w-auto">
W3Learn
</div>
<div className="py-2">
<a className="px-10 text-white" href="/html-lecture"> HTML</a>
<a className="px-10 text-white" href="/css-lecture"> CSS </a>
<a className="px-10 text-white" href="/js-lecture"> JS </a>
</div>
</nav>
</header>
</main>
</div>
)
}
Here's my tailwind configuration:
module.exports = {
mode: "jit",
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {},
screens: {
},
},
variants: {
extend: {},
},
plugins: [],
}