Tailwind CSS on GitHub

响应式设计

使用响应式工具类变体来构建自适应用户界面。

Overview

Tailwind中的每个工具类都可以在不同的断点有条件地应用,这使得无需离开HTML就可以非常容易的构建复杂的响应式内容。

默认情况下有5个断点,灵感来自常见的设备分辨率:

Breakpoint prefixMinimum widthCSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

要添加一个工具类,但只在某个断点生效,你需要做的就是在该工具类的前面加上断点名,后跟:字符:

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

这适用于所有的工具类,这意味着你可以在给定的断点上改变任何东西——甚至像字母间距或光标样式这样的东西。

以下是一个简单的营销页面组件的例子,它在小屏幕上使用堆叠布局,在大屏幕上使用并排布局(调整浏览器的大小以查看实际效果):

Man looking at item at a store
Case study
Finding customers for your new business

Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

上面的例子的工作原理如下:

  • 默认情况下,外部的divdisplay: block,但是通过添加md:flex工具类,它在中等或更大的屏幕上变成了display: flex
  • 当父对象是伸缩容器时,我们希望确保图像永远不会收缩,因此我们添加了md:flex-shrink-0来防止在中屏幕或更大屏幕上收缩。从技术上讲,我们本来可以只使用flex-shrink-0,因为它在较小的屏幕上不会做任何事情,但因为它只在md屏幕上有影响,所以在类名中明确表示是一个好主意。
  • 在小屏幕上,图像默认自动全宽。对于中屏及以上的屏幕,我们使用md:w-48将宽度限制为固定大小。

在本例中我们只使用了一个断点,但是你也可以使用smlgxl响应前缀轻松地定制其他大小的组件。


移动端优先

默认情况下,Tailwind使用一个“移动端优先”的断点系统,类似于Bootstrap等其他框架中使用的功能。

这意味着无前缀的工具类(如uppercase)对所有屏幕大小都有效,而带前缀的工具类(如md:uppercase)只在指定的断点及更大屏幕上生效。

针对手机屏幕

这种方法最让人惊讶的地方在于,要为移动设备设计样式,你需要使用无前缀的工具类版本,而不是带有sm:前缀的版本。不要把sm:想成是“在小屏幕上”,而是把它想成是“在小的断点上”。

不要使用sm:去针对移动端来设计样式

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>

使用无前缀工具类来设计移动端行为样式,并在较大的断点覆盖它们

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

出于这个原因,我们最好先执行手机布局,然后再对sm屏幕进行调整,然后再对md屏幕进行调整。

以单个断点为目标

Tailwind的断点只包括一个“最小宽度”,不包括一个“最大宽度”,这意味着你在一个较小的断点上添加的任何工具类也会被应用到更大的断点上。

如果你想只在一个断点上应用一个工具类,解决方案是通过添加另一个工具类来抵消它,以便更大的尺寸覆盖该工具类。

下面是一个背景色在md断点为红色,而在其他断点为蓝绿色的例子:

<div class="bg-teal-500 md:bg-red-500 lg:bg-teal-500">
  <!-- ... -->
</div>

Notice that we did not have to specify a background color for the sm breakpoint or the xl breakpoint — you only need to specify when a utility should start taking effect, not when it should stop.

请注意,我们没有必须为sm断点或xl断点指定背景颜色——你只需要指定一个工具类应该开始生效的时间,而不是应该停止的时间。


自定义断点

你可以在你的tailwind.config中完全自定义你的断点。配置文件:tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

更多配置查看文档断点.