nextjs 应用程序上的 Tailwind CSS 响应行为

Question

我是 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: [],
}

Answer 1

问题的原因是缺少断点配置。 我在屏幕中添加了以下断点配置行。 实际上，这条线是默认的，虽然缺少线，但这个应用程序必须运行没有错误。

 '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 响应行为

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-06-30 13:48:16

nextjs 应用程序上的 Tailwind CSS 响应行为

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-06-30 13:48:16

解决方案1
0 已采纳 2021-06-30 13:48:16