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

Question

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

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

我想把它设置为一个自定义值(稍微小一点)

请问我该怎么做?

Answer 1

根据您希望将max-width设置小一点的原因，您可能需要使用两个配置选项。如果你想的话，也可以两者都用。

如果你只是想让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: [],
}

看看这个演示这两种策略的顺风游戏。您可以看到容器的颜色发生了变化(显示正常的断点修饰符没有改变)，而容器的大小变小了。

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

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文档中找到它。

Answer 5

这是我解决它的方法

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' },
},
}

Answer 6

我刚刚遇到了同样的问题。到目前为止，所有的答案都是很好的修复，但是从顺风CSS中添加一个max width实用程序类对我来说是更少的代码和配置。

HTML代码

<div class="container max-w-full"> Hello I'm a container </div>

tailwind.config.js

theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},

您可以查看顺风文档，了解更多自定义最大宽度的方法，请访问https://tailwindcss.com/docs/max-width

Answer 7

这就是我如何在/src/input.css

中做到这一点

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: "BYekan";
src: url("../font/BYekan.ttf");
}
html {
@apply font-BYekan;
}
.container {
@apply max-w-6xl;
}
}