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

Question

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

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

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

请问我该怎么做？

Answer 1

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

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

你可以在Tailwind documentation找到它。

Answer 2

根据您为什么要将最大宽度设置得更小一些，您可能需要选择两个配置选项。如果您愿意，也可以同时使用两者。

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

但是，如果您确实希望最大宽度更小，您还可以使用容器配置自定义屏幕尺寸。无论出于何种原因，这似乎都没有记录，但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 演示这两种策略。当容器尺寸变小时，您可以看到容器颜色的变化（显示正常的断点修饰符没有改变）。

Answer 3

你也可以这样定义一个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 4

这就是我为解决它所做的工作

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .container {
    @apply minsm:max-w-[640px] minmd:max-w-[768px] minlg:max-w-[1024px] minxl:max-w-[1280px] min2xl:max-w-[1536px];
  }
}

tailwind.config.js

theme: {
    screens: {
      '2xl': { max: '1535px' },
      xl: { max: '1279px' },
      lg: { max: '1023px' },
      md: { max: '767px' },
      sm: { max: '639px' },

      minsm: { min: '640px' },
      minmd: { min: '768px' },
      minlg: { min: '1024px' },
      minxl: { min: '1280px' },
      min2xl: { min: '1536px' },
    },
}