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

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

本文介绍了在特定断点配置.tainer最大宽度-Tailwincss的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

TailWind默认情况下将.containermax-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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:在特定断点配置.tainer最大宽度-Tailwincss

基础教程推荐