Tailwind CSS on GitHub

最大宽度

用来设置元素最大宽度的功能类

Default class reference

Class
Properties
max-w-0max-width: 0rem;
max-w-nonemax-width: none;
max-w-xsmax-width: 20rem;
max-w-smmax-width: 24rem;
max-w-mdmax-width: 28rem;
max-w-lgmax-width: 32rem;
max-w-xlmax-width: 36rem;
max-w-2xlmax-width: 42rem;
max-w-3xlmax-width: 48rem;
max-w-4xlmax-width: 56rem;
max-w-5xlmax-width: 64rem;
max-w-6xlmax-width: 72rem;
max-w-7xlmax-width: 80rem;
max-w-fullmax-width: 100%;
max-w-minmax-width: min-content;
max-w-maxmax-width: max-content;
max-w-prosemax-width: 65ch;
max-w-screen-smmax-width: 640px;
max-w-screen-mdmax-width: 768px;
max-w-screen-lgmax-width: 1024px;
max-w-screen-xlmax-width: 1280px;
max-w-screen-2xlmax-width: 1536px;

使用方法

使用 max-w-{size} 功能类设置元素的最大宽度。

max-w-md
<div class="max-w-md mx-auto ...">
  max-w-md
</div>

Prose

我们默认增加了一个新的最大宽度,叫做 max-w-prose。如果您熟悉 排版插件,您可能会认识这个。这个类背后的想法是,它允许您有一个最佳的阅读宽度。

Why do you never see elephants hiding in trees?

Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.

<div class="max-w-prose ...">
  <p class="font-bold">Why do you never see elephants hiding in trees?</p>
  <p>Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</div>

响应式

要在特定的断点处控制元素的最大宽度,请在任何现有的最大宽度功能类前添加 {screen}: 前缀。

<div class="max-w-sm md:max-w-lg ...">
  <!-- ... -->
</div>

关于 Tailwind 的响应式设计功能的更多信息,请查看 响应式设计 文档。


定制

Max-Width Scale

在您的 tailwind.config.js 文件的 theme.maxWidth 部分定制 Tailwind 的默认最大宽度。

  // tailwind.config.js
  module.exports = {
    theme: {
      maxWidth: {
+       '1/4': '25%',
+       '1/2': '50%',
+       '3/4': '75%',
      }
    }
  }

主题自定义文档 中了解更多关于自定义默认主题的信息。

变体

默认情况下, 针对 max-width 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 maxWidth 属性来控制为 max-width 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       maxWidth: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 max-width 功能,您可以通过在配置文件的 corePlugins 部分将 maxWidth property to false in the corePlugins section of your config file:

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