2024-03-04 Tailwind CSS 自学自用其三

响应式设计

提供了五个常见的响应式断点：

断点
默认情况下，标记了断点的样式，比如md: text-red-500，默认会向上兼容，也就是比他大的断点都会应用该样式，也就是lg xl 2xl断点下都会变成红色字体，并且相同的样式会被覆盖

<p
  aria-sort="none"
  className={"text-green-500 md:flex md:text-red-500"}
>
  以下是一段next的字体测试文案
</p>

断点限制

如果只想要在特定断点范围内使用此样式，则需要搭配max-*使用，比如md:max-lg
当然我也测试过md:max-md，因为max-sm/md/lg/xl/2xl 对应的是@media not all and (min-width: 对应的px，md是786px)，而md本身又是@media (min-width: 768px)所以干脆冲突不生效了

其他操作

也可以使用min-[]和max-[]来直接控制断点范围，效果和断点限制的组合用法是一样的
min-[num]对应的是@media (min-width: *px)，在min-无限大width这个范围内生效，低于min设置的最小宽度则不生效
max-[num]对应的是@media (max-width: *px)，在0-max这个范围内生效，超过max设置的最大宽度则不生效