在特定断点配置.tainer最大宽度-Tailwincss

2022-04-24 00:00:00 html css tailwind-css

请告诉我如何在不同的断点配置顺风.containermax-width

TailWind默认情况下将.containermax-width设置为断点的宽度。

我想将其设置为自定义值(稍微小一点)

请告诉我该怎么做?


解决方案

根据您希望将最大宽度设置得稍小的原因,您可能会选择两个配置选项。如果需要,您也可以同时使用两者。

如果您只想将最大宽度调小一点,这样内容就不会紧贴屏幕边缘,那么您可能只需要add some padding。这将为您的容器内部添加水平填充。您也可以将容器配置为centered。设置较小的最大宽度并不会阻止内容到达边缘,只是会使内容到达较小的宽度。

但是,如果您确实希望最大宽度更小,也可以使用您的容器配置自定义屏幕大小。无论出于什么原因,这似乎都没有被记录在案,但是digging around in the source显示容器插件first checks container.screens,然后回到正常的screens配置。这使您可以在不影响正常断点的情况下配置容器断点。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  theme: {
    container: {
      // you can configure the container to be centered
      center: true,

      // or have default horizontal padding
      padding: '1rem',

      // default breakpoints but with 40px removed
      screens: {
        sm: '600px',
        md: '728px',
        lg: '984px',
        xl: '1240px',
        '2xl': '1496px',
      },
    },
  },
  variants: {},
  plugins: [],
}

查看演示这两种策略的Tailwind Play。当容器较小时,您可以看到容器颜色的变化(显示正常的断点修饰符是如何不变的)。

相关文章