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

Question

I'm new in Tailwind CSS.我是 Tailwind CSS 的新手。 I build to the user interface of nextjs application by starting "mobile first" like everybody.我像每个人一样通过启动“移动优先”来构建 nextjs 应用程序的用户界面。 Flex direction, background color are working at mobile size screen. Flex 方向、背景颜色适用于移动尺寸的屏幕。 So tailwind css is correctly importing nextjs application.所以 tailwind css 正确导入了 nextjs 应用程序。 When change the screen size, not change to flex direction or background color of navigation bar.更改屏幕大小时，不会更改导航栏的 flex 方向或背景颜色。

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

Answer 1

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) { ... }

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