Tailwind - 响应式断点

为了在特定的断点上为元素设置样式，可以使用响应式修饰符，比如md和lg

Tailwind中的每个功能类都可以在不同的断点条件下被有条件的应用, 默认情况下，Tailwind使用类似于bootstrap那样的移动优先的断点系统

这意味着未加前缀的实用工具（如uppercase）在所有屏幕尺寸上都生效，而加前缀的实用工具（如md:uppercase）只在指定的断点及以上生效

因此，最佳实践是先完成移动布局，然后在sm屏幕上添加任何有意义的更改，接着是md屏幕等

默认情况下有五个断点:

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

<!-- 默认情况下宽度为16，中等屏幕上为32，大屏幕上为48 --> 
<img class="w-16 md:w-32 lg:w-48" src="...">

默认情况下，像md:flex这样的规则将在该断点上及以上断点上被应用，但有的时候希望该断点及以下断点生效可以在断点前边加上max-

Modifier	Media query
max-sm	@media not all and (max-width: 640px) { ... }
max-md	@media not all and (max-width: 768px) { ... }
max-lg	@media not all and (max-width: 1024px) { ... }
max-xl	@media not all and (max-width: 1280px) { ... }
max-2xl	@media not all and (max-width: 1536px) { ... }

<!-- 仅在宽度为[768, 1280]的屏幕上生效 -->
<div class="md:max-xl:flex">
	<!-- ... -->
</div>

自定义断点

module.exports = {
  theme: {
    // theme.screens可以自定义响应式断点值
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

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

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

// 使用自定义的key作为响应式断点名
<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>

任意值

有时候需要使用预设断点之外的值，这个时候可以使用中括号语法定义一次性值

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>