在特定断点处配置 .container max-width - Tailwindcss

Question

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

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

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

请问我该怎么做？

原文由 Eddie Dane 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

如果您只是想让 max-width 小一点，这样内容就不会挤满屏幕的边缘，您可能只想 添加一些 padding 。这将向容器内部添加水平填充。您还可以将容器配置为 居中。设置较小的 max-width 并不会阻止内容到达边缘，它只是让它以较小的宽度到达边缘。

但是，如果您确实希望 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 。您可以看到容器颜色发生变化（显示正常断点修饰符未发生变化），同时容器尺寸变小了。

原文由 person_v1.32 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您也可以通过这种方式定义顺风插件：

 module.exports = {
  corePlugins: {
    container: false
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          '@screen sm': {
            maxWidth: '640px',
          },
          '@screen md': {
            maxWidth: '768px',
          },
          '@screen lg': {
            maxWidth: '1280px',
          },
          '@screen xl': {
            maxWidth: '1400px',
          },
        }
      })
    }
  ]
}

资源： https ://stefvanlooveren.me/blog/custom-container-width-tailwind-css

原文由 Emad Armoun 发布，翻译遵循 CC BY-SA 4.0 许可协议