TailwindCSS默认的断点尺寸总结

24 min read

  1. sm（小型设备）:

    • 最小宽度：640px
    • 类名前缀：sm:

  2. md（中型设备）:

    • 最小宽度：768px
    • 类名前缀：md:

  3. lg（大型设备）:

    • 最小宽度：1024px
    • 类名前缀：lg:

  4. xl（超大型设备）:

    • 最小宽度：1280px
    • 类名前缀：xl:

  5. 2xl（超超大型设备）:

    • 最小宽度：1536px
    • 类名前缀：2xl:

在TailwindCSS中，这些断点用于定义在特定屏幕宽度下应用的样式。例如：

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-yellow-500 xl:bg-purple-500 2xl:bg-pink-500">
  响应式背景颜色
</div>

以上代码在不同的屏幕宽度下会显示不同的背景颜色：

  • 小于640px：红色 (bg-red-500)
  • 640px及以上：绿色 (bg-green-500)
  • 768px及以上：蓝色 (bg-blue-500)
  • 1024px及以上：黄色 (bg-yellow-500)
  • 1280px及以上：紫色 (bg-purple-500)
  • 1536px及以上：粉色 (bg-pink-500)

在TailwindCSS中，你可以通过修改 tailwind.config.js 文件来自定义断点。以下是如何自定义断点的示例：

  1. 创建或编辑 tailwind.config.js 文件。

  2. 在 tailwind.config.js 文件中，扩展或替换默认的断点配置。

以下是一个示例配置，展示了如何添加和自定义断点：

module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '480px',  // 新增的超小屏幕断点
        'sm': '640px',  // 重新定义的小屏幕断点
        'md': '768px',  // 中屏幕断点
        'lg': '1024px', // 大屏幕断点
        'xl': '1280px', // 超大屏幕断点
        '2xl': '1536px',// 超超大屏幕断点
        '3xl': '1920px',// 新增的超大屏幕断点
      }
    }
  }
}

在上述示例中，我们添加了 xs 和 3xl 断点，并重新定义了 sm 到 2xl 的默认断点。

自定义断点后，可以像使用默认断点一样在类名前添加断点前缀。例如：

<div class="bg-red-500 xs:bg-blue-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-purple-500 xl:bg-pink-500 2xl:bg-indigo-500 3xl:bg-gray-500">
  响应式背景颜色
</div>

在这个例子中，不同的屏幕宽度下会显示不同的背景颜色：

  • 小于480px：红色 (bg-red-500)
  • 480px及以上：蓝色 (xs:bg-blue-500)
  • 640px及以上：绿色 (sm:bg-green-500)
  • 768px及以上：黄色 (md:bg-yellow-500)
  • 1024px及以上：紫色 (lg:bg-purple-500)
  • 1280px及以上：粉色 (xl:bg-pink-500)
  • 1536px及以上：靛蓝色 (2xl:bg-indigo-500)
  • 1920px及以上：灰色 (3xl:bg-gray-500)