Nuxt项目中Tailwind CSS v3容器padding配置不生效问题求助

问题出在container.screens的配置逻辑上：当你设置DEFAULT: '1280px'时，该配置会与自定义的xl断点（同样是1280px）产生阈值冲突，导致Tailwind无法正确生成xl断点对应的padding规则，最终默认的20px padding始终生效。

方案1：调整Container的Screens配置，避免阈值冲突 #

移除container.screens中的DEFAULT项，仅针对xl及以上断点设置容器宽度规则，让padding的断点配置正常触发：

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', // xl及以上断点生效
          },
          screens: {
            xl: '100%', // 屏幕>=1280px时，容器宽度占满
            xxl: '1400px', // 可选：xxl断点时容器宽度设为1400px
          }
        },
      },
    },
  },
},

方案2：保留DEFAULT屏幕宽度，调整断点阈值 #

如果需要在小于xl的屏幕上保持容器宽度固定为1280px，可将xl断点的阈值调高1px，避免与DEFAULT的1280px冲突：

postcss: {
  plugins: {
    tailwindcss: {
      content: ['./src/**/*.{scss,vue}'],
      theme: {
        screens: {
          xs: '375px',
          sm: '576px',
          md: '768px',
          lg: '1024px',
          xl: '1281px', // 调整为比DEFAULT的1280px大1px
          xxl: '1400px'
        },
        container: {
          center: true,
          padding: {
            DEFAULT: '20px',
            xl: '40px',
          },
          screens: {
            DEFAULT: '1280px',
            xl: '100%',
          }
        },
      },
    },
  },
},

验证简化示例 #

将简化示例的配置修改为方案1的结构，即可看到xl断点时padding自动切换为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: {
        xl: '100%',
      }
    },
  },
}

内容的提问来源于stack exchange，提问作者ZloiGoroh