自定义 Screen

自定义您项目的默认断点。

您在 tailwind.config.js 文件的 theme.screens 部分中定义了项目的断点。键将成为响应式修饰符(例如md:text-center),值是该断点应该开始的最小宽度。

默认断点受到常见设备分辨率的启发：

  1. module.exports = {
  2.   theme: {
  3.     screens: {
  4.       'sm': '640px',
  5.       // => @media (min-width: 640px) { ... }
  7.       'md': '768px',
  8.       // => @media (min-width: 768px) { ... }
  10.       'lg': '1024px',
  11.       // => @media (min-width: 1024px) { ... }
  13.       'xl': '1280px',
  14.       // => @media (min-width: 1280px) { ... }
  16.       '2xl': '1536px',
  17.       // => @media (min-width: 1536px) { ... }
  18.     }
  19.   }
  20. }

您可以自由地拥有任意数量的 Screen，按照您项目中喜欢的方式命名它们。