Tailwind 容器在 SM 设备上不工作

Question

这是我第一次使用tailwind
但是我在构建响应式网站时遇到了一些问题
容器在小型设备上不工作
它适用于中型设备，如下所示：Medium Device
这个在小型设备上：Small Device
有代码：

    <div className="bg-blackColor min-h-screen">
      <div className="container mx-auto py-10">
        <div className="flex justify-between">
          <div className="flex flex-[2_2_0%] items-center justify-between">
            <div className="flex-1">
              <img src={EnverLogo} alt="Logo" className="w-[130px] h-[40px]" />
            </div>
            <ul className="lg:flex justify-between flex-1 hidden">
              <li className="text-lg font-bold hover:text-whiteColor text-primaryColor">Home</li>
              <li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">Services</li>
              <li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">Our Project</li>
              <li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">About Us</li>
            </ul>
          </div>
          <div className="lg:flex flex-1 items-center justify-end hidden">
            <div className="w-[160px] h-[35px] border-2 border-whiteColor rounded-md backdrop-blur-md" />
          </div>
        </div>
      </div>
    </div>

Answer 1

我假设您想知道为什么小屏幕上没有水平填充。这是因为在 sm 以下，宽度为 100%，因此它当然会跨越整个视口宽度。在 sm 及更高版本上，看起来有填充，因为视口可能比 640px 稍大，您可能已将其居中。

如果我的假设是正确的，您需要根据 Tailwindcss docs:

手动为容器提供填充

// tailwind.config.js

module.exports = {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};

Tailwind 容器在 SM 设备上不工作

Tailwind Container Not Working at SM Devices

html

javascript

css

reactjs

tailwind-css