时间戳

首页 > 解决方案 > 在特定断点处配置 .container 最大宽度 - Tailwindcss

html - 在特定断点处配置 .container 最大宽度 - Tailwindcss

问题描述

请问如何.container max-width在各种断点配置顺风。

Tailwind 默认情况下将 的 设置max-width为.container等于断点的宽度。

我想将其设置为自定义值（少一点）

请问我该怎么做？

标签： htmlcsstailwind-css

解决方案

根据您想要将最大宽度设置得更小的原因，您可能需要选择两个配置选项。如果这是您想要的，您也可以同时使用两者。

如果您只想使 max-width 更小一点，以便内容不会紧贴屏幕边缘，您可能只想添加一些 padding。这将为容器内部添加水平填充。您还可以将容器配置为居中。设置较小的 max-width 不会阻止内容到达边缘，它只会使其以较小的宽度这样做。

但是，如果您确实希望最大宽度更小，您还可以使用容器配置自定义屏幕尺寸。无论出于何种原因，这似乎都没有记录，但是在源代码中挖掘表明容器插件首先检查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 。您可以看到容器颜色变化（显示正常断点修饰符如何未更改），而容器大小更小。

推荐阅读