this is my first time to using tailwind
But i got some problem to build a responsive website
The container is not working at Small devices
It works at Medium devices like this: Medium Device
And this one is at Small devices: Small Device
There is the code:

    <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>

CodePudding user response：

I'm assuming you're wondering why there is no horizontal padding on the small screen. This is because below sm, the width is 100% so of course it would span the entire viewport width. On sm and up, it would look like there is padding because the viewport might be a little larger than 640px and you might have centered it.

If my assumption is correct, you would need to manually provide padding to the container yourself as per Tailwindcss docs:

// tailwind.config.js

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