Tailwind CSS responsive behavior on nextjs app
Question
I'm new in Tailwind CSS. I build to the user interface of nextjs application by starting "mobile first" like everybody. Flex direction, background color are working at mobile size screen. So tailwind css is correctly importing nextjs application. When change the screen size, not change to flex direction or background color of navigation bar.
Navbar code is shared below:
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>
)
}
tailwind configuration is shared below:
module.exports = {
mode: "jit",
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {},
screens: {
},
},
variants: {
extend: {},
},
plugins: [],
}
1 answers
solution1
0 ACCPTED 2021-06-30 13:48:16
Cause of problem is missing breakpoints configuration. I add the below breakpoints configuration lines in screens. Actually, this lines are coming default and though missing lines, this app must be running without error.
'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) { ... }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.