[英]Tailwind CSS responsive behavior on nextjs app
我是 Tailwind CSS 的新手。 我像每個人一樣通過啟動“移動優先”來構建 nextjs 應用程序的用戶界面。 Flex 方向、背景顏色適用於移動尺寸的屏幕。 所以 tailwind css 正確導入了 nextjs 應用程序。 更改屏幕大小時,不會更改導航欄的 flex 方向或背景顏色。
導航欄代碼共享如下:
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>
)
}
順風配置分享如下:
module.exports = {
mode: "jit",
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {},
screens: {
},
},
variants: {
extend: {},
},
plugins: [],
}
問題的原因是缺少斷點配置。 我在屏幕中添加了以下斷點配置行。 實際上,這條線是默認的,雖然缺少線,但這個應用程序必須運行沒有錯誤。
'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) { ... }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.