Tailwind padding settings for container

I use TailwindCSS v3 in a Nuxt project a have following settings:

postcss: {
  plugins: {
    tailwindcss: {
      content: ['./src/**/*.{scss,vue}'],
      theme: {
        screens: {
          xs: '375px',
          sm: '576px',
          md: '768px',
          lg: '1024px',
          xl: '1280px',
          xxl: '1400px'
        },
        container: {
          center: true,

          padding: {
            DEFAULT: '20px',
            xl: '40px',
          },

          screens: {
            DEFAULT: '1280px',
            xl: '100%',
          }
        },
      },
    },
  },
},

And it works perfectly fine except for container padding. It always uses default settings. In styles I see it overrides padding for the same value.

tailwind.config = {
  theme: {
    screens: {
      xs: '375px',
      sm: '576px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xxl: '1400px'
    },
    container: {
      center: true,

      padding: {
        DEFAULT: '20px',
        xl: '40px',
      },

      screens: {
        DEFAULT: '1280px',
        xl: '100%',
      }
    },
  },
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="container bg-gray-100">
  <h1 class="text-2xl font-bold text-center">Tailwind Container Example</h1>
  <p class="text-center mt-4 bg-red-200">
    Click to Full Page for XL
  </p>
</div>

Solution

The problem is that you are asking the container to be 100% in size from xl onward. However, it adjusts the padding relative to this, like this:

@media (min-width: 100%) { /* Error */
    .container {
        max-width: 100%;
        padding-right: 40px;
        padding-left: 40px;
    }
}

But this would not be valid syntax, as only calculable values like px, em, rem, vw, etc. should be used. See:

@media (min-width: 100vw) {
    .container {
        max-width: 100vw;
        padding-right: 40px;
        padding-left: 40px;
    }
}

tailwind.config = {
  theme: {
    screens: {
      xs: '375px',
      sm: '576px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xxl: '1400px'
    },
    container: {
      center: true,

      padding: {
        DEFAULT: '20px',
        xl: '40px',
      },

      screens: {
        DEFAULT: '1280px',
        xl: '100vw', // instead of '100%',
      }
    },
  },
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="container bg-gray-100">
  <h1 class="text-2xl font-bold text-center">Tailwind Container Example</h1>
  <p class="text-center mt-4 bg-red-200">
    Click to Full Page for XL
  </p>
</div>

And it's important to note that in this case, 100vw might be smaller than 1280px, so it could take effect earlier on smaller screens. I would rather use fixed values for more reliable results.

tailwind.config = {
  theme: {
    screens: {
      xs: '375px',
      sm: '576px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xxl: '1400px'
    },
    container: {
      center: true,

      padding: {
        DEFAULT: '20px',
        xl: '40px',
      },

      screens: {
        DEFAULT: '1280px',
        xl: '1400px', // instead of '100%',
      }
    },
  },
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="container bg-gray-100">
  <h1 class="text-2xl font-bold text-center">Tailwind Container Example</h1>
  <p class="text-center mt-4 bg-red-200">
    Click to Full Page for XL
  </p>
</div>