使用 tailwindcss-debug-screens 实时显示屏幕断点
更新于 2024-05-20 12:42
效果预览
看下图右下角的 screen: xx，随着屏幕大小变化，显示的屏幕断点也在变
安装
Github 地址：tailwindcss-debug-screens
安装
tailwindcss-debug-screens
pnpm i tailwindcss-debug-screens -D配置
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;
将
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
评论 0
还没有公开评论。
评论已关闭，历史评论仍可阅读。