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

Configure .container max-width at specific breakpoints - Tailwindcss(在特定断点配置.tainer最大宽度-Tailwincss)

问题描述

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

TailWind默认情况下将.container的max-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。当容器较小时，您可以看到容器颜色的变化(显示正常的断点修饰符是如何不变的)。

这篇关于在特定断点配置.tainer最大宽度-Tailwincss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！