nextjs 应用上的 Tailwind CSS 响应行为
Posted
技术标签:
【中文标题】nextjs 应用上的 Tailwind CSS 响应行为【英文标题】：Tailwind CSS responsive behavior on nextjs app 【发布时间】：2021-09-12 14:39:27 【问题描述】：我是 Tailwind CSS 的新手。我通过像大家一样启动“移动优先”来构建 nextjs 应用程序的用户界面。 Flex 方向、背景颜色在移动尺寸屏幕上工作。所以 tailwind css 正确地导入了 nextjs 应用程序。更改屏幕大小时，不更改导航栏的伸缩方向或背景颜色。
导航栏代码分享如下：
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: [],
【问题讨论】：
您是否阅读过文档的tailwindcss.com/docs/responsive-design#targeting-mobile-screens 部分？ 【参考方案1】：问题的原因是缺少breakpoints 配置。我添加以下断点 屏幕中的配置行。实际上，这些行是默认的，虽然缺少行，但这个应用程序必须在没有错误的情况下运行。
'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) ...
【讨论】：
以上是关于nextjs 应用上的 Tailwind CSS 响应行为的主要内容，如果未能解决你的问题，请参考以下文章
NextJS React Tailwind CSS Navbar 活动样式
暗模式在带有 Nextjs 和 Typescript 的 Tailwind CSS V3 中不起作用
使用 Nextjs Tailwind Emotion 导出项目丢失了 tailwind css 样式
NextJS - 无法在 Tailwind CSS 中使用自定义颜色