使用 tailwindcss-debug-screens 实时显示屏幕断点

使用 Tailwind CSS 开发项目的时候，经常要针对不同大小的屏幕做适配，可以使用 tailwindcss-debug-screens 来实时显示当前屏幕大小处于哪个断点

发布于  星期一，五月 20 2024

效果预览

看下图右下角的 screen: xx，随着屏幕大小变化，显示的屏幕断点也在变

20240520-200128.gif

安装

Github 地址：tailwindcss-debug-screens

  1. 安装 tailwindcss-debug-screens
pnpm i tailwindcss-debug-screens -D
  1. 配置 tailwind.config.ts 的 plugins 字段
export default {
  //...
  plugins: [
    require('tailwindcss-debug-screens'),
  ]
} satisfies Config;

或者配置为只在开发环境显示

export default {
  //...
  plugins: [
    // 开发模式下加载显示屏幕大小的插件
    process.env.NODE_ENV === 'development' &&
      require('tailwindcss-debug-screens'),
  ]
} satisfies Config;
  1. 将 debug-screen 类名添加到body标签中
<body class="debug-screens">

自定义配置

配置 tailwind.config.ts 的 theme.debugScreens 字段

export default {
  //...
  theme: {
    debugScreens: {
      // 设置位置为右下角
      position: ['bottom', 'right'],
      ignore: ['dark'],
    },
  }
} satisfies Config;

更多配置信息参考：tailwindcss-debug-screen Customization

踩过的一个坑

如果配置了 tailwind.config.ts 的 theme.extend.screens 字段时，tailwindcss-debug-screens 获取到的屏幕断点可能不正确

相识问题的 Issue：Custom "xs" screen overlaps other screens #21

比如：

export default {
  // ...
  theme: {
    debugScreens: {
      position: ['bottom', 'right'],
      ignore: ['dark'],
    },
    extend: {
      // 这里我们自己扩展了一个屏幕断点 wrapper
      // 屏幕宽度 >= 1200px 
      screens: {
        wrapper: '1200px',
      },
    },
  },
} satisfies Config;

这个配置会导致屏幕宽度 >= 1200px 时一直显示为 wrapper 断点，即使后面还有屏幕宽度更大的断点 2xl (1536px)

正确的做法是：不要通过配置 tailwind.config.ts 的 theme.extend.screens 字段来扩展屏幕断点，而是应该直接重写 theme.screens 字段覆盖掉 Tailwind CSS 的默认配置

示例：

export default {
  // ...
  theme: {
    screens: {
      sm: '640px',
      // => @media (min-width: 640px) { ... }

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

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

      // 自定义屏幕断点，基础版心
      wrapper: '1200px',

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

      '2xl': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  },
} satisfies Config;

Tailwind CSS 的默认屏幕断点配置见：https://tailwindcss.com/docs/screens

  • Tailwind CSS