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

Question

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

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

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

请问我该怎么做？

Answer 1

根据您想要将 max-width 设置得小一些的原因，您可能需要使用两个配置选项。如果您愿意，也可以同时使用两者。

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

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

Answer 2

您还可以定义一个 tailwind 插件，如下所示：

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

Answer 3

我发现它可以这样工作，我把它放进去src/style.css

@layer components{
  .container {
    @apply max-w-7xl px-4 self-center;
  }
}

Answer 4

您可以通过在 tailwind.config.js 的 corePlugins 部分中将容器属性设置为 false 来禁用它

// tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     container: false,
    }
  }

您可以在Tailwind 文档中找到它。