nextjs 应用上的 Tailwind CSS 响应行为答案

【问题标题】：Tailwind CSS responsive behavior on nextjs appnextjs 应用上的 Tailwind CSS 响应行为
【发布时间】：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 部分？

标签： html css reactjs next.js tailwind-css

【解决方案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) { ... }

【讨论】：