为媒体查询断点添加辅助标识戳

tailwindcss 媒体查询系统断点一览

Breakpoint prefix	Minimum width	CSS
sm	640px	`@media (min-width: 640px) { ... }`
md	768px	`@media (min-width: 768px) { ... }`
lg	1024px	`@media (min-width: 1024px) { ... }`
xl	1280px	`@media (min-width: 1280px) { ... }`
2xl	1536px	`@media (min-width: 1536px) { ... }`

需求

tailwindcss 为我们提供了 api 友好的 移动端布局设计优先 的媒体查询系统，不过该媒体查询系统断点的临界值对于初上手，还是会感到陌生。

所以吾辈基于减少记背需求特意声明如下组件，仅在开发模式下固定于页面左上角，时刻显示当前页面尺寸所处“断点”，直观易用。

实现源码

MediaQueryPromptStamp.tsx

/** 辅助 tailwind 媒体查询特性下断点系统的标记元素 */
function MediaQueryPromptStamp() {
  return (
    <i
      className={`
        before:content-['mini']
        xs:before:content-['xs']
        xs:before:hover:content-['xs/475px']
        sm:before:content-['sm']
        sm:before:hover:content-['sm/640px']
        md:before:content-['md']
        md:before:hover:content-['md/768px']
        lg:before:content-['lg']
        lg:before:hover:content-['lg/1024px']
        xl:before:content-['xl']
        xl:before:hover:content-['xl/1280px']
        2xl:before:content-['2xl']
        2xl:before:hover:content-['2xl/1536px']
        before:fixed
        before:left-2
        before:top-2
        before:z-50
        before:h-min
        before:min-w-max
        before:rounded-sm
        before:bg-secondary/40
        before:px-2
        before:py-0.5
        before:text-center
        before:text-sm
        before:not-italic
        before:text-secondary-foreground/40
        before:ring-2
        before:ring-secondary/40
        before:ring-offset-2
        before:hover:bg-secondary/90
        before:hover:text-secondary-foreground/90
        `
      }
    />
  );
}

export default MediaQueryPromptStamp;

当然的，多数实际项目里并没有依赖 tailwind 原子类，我们仍可以使用传统 CSS 来定义样式，同样基于上面的思路，定义一个服务于媒体查询断点的辅助标识戳。当然写原生 CSS 语句的工作可能会稍微繁重了。

@media (min-width: 1024px) {
  i.helper::before {
    /* ... */
    content: "lg",

    &:hover {
      content: "lg/1024px",
    }
  }
}

@media (min-width: 640px) { /* ... */ }

/* ... */