如何用Tailwind断点实现响应式布局：大屏表格/移动端卡片

方案一：用Tailwind断点类直接控制显示隐藏（推荐，符合Tailwind设计理念） #

直接通过Tailwind的断点类（比如sm:）控制两个组件的显示与隐藏，无需额外JS逻辑，代码简洁直观：

<>
  <div className="text-[35px] text-neutral-900">
    Welcome back,{" "}
    <span className="font-semibold text-[50px] text-black">
      {currentUser.name}
    </span>
  </div>
  <div className="text-[25px] text-zinc-400 font-extralight">
    Here are your reminders...
  </div>
  {/* 移动端（<640px）显示卡片，大屏隐藏 */}
  <div className="block sm:hidden">
    {/* 替换成你的卡片组件 */}
    <p>insert cards here...</p>
  </div>
  {/* 大屏（≥640px）显示表格，移动端隐藏 */}
  <div className="hidden sm:block">
    <DataTable columns={columns} data={data} />
  </div>
</>

• 原理：Tailwind的sm:断点对应CSS媒体查询@media (min-width: 640px)，block/hidden类直接控制元素的显示状态，完全贴合Tailwind的响应式设计思路。
• 适用场景：如果两个组件的渲染开销都很小，这个方案足够高效；若其中某个组件（比如DataTable）渲染成本高，担心DOM冗余，可采用方案二。

方案二：动态渲染对应组件（仅渲染当前屏幕所需内容） #

通过window.matchMedia监听Tailwind的断点媒体查询，动态切换渲染的组件，避免冗余DOM节点：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [isLargeScreen, setIsLargeScreen] = useState(false);

  useEffect(() => {
    // 对应Tailwind的sm断点，可按需换成md(768px)、lg(1024px)等官方断点
    const mediaQuery = window.matchMedia('(min-width: 640px)');
    
    // 初始化状态
    setIsLargeScreen(mediaQuery.matches);
    
    // 监听屏幕尺寸变化，实时更新状态
    const handleResize = (e) => setIsLargeScreen(e.matches);
    mediaQuery.addEventListener('change', handleResize);
    
    // 组件卸载时清理监听事件，避免内存泄漏
    return () => mediaQuery.removeEventListener('change', handleResize);
  }, []);

  return (
    <>
      <div className="text-[35px] text-neutral-900">
        Welcome back,{" "}
        <span className="font-semibold text-[50px] text-black">
          {currentUser.name}
        </span>
      </div>
      <div className="text-[25px] text-zinc-400 font-extralight">
        Here are your reminders...
      </div>
      {isLargeScreen ? (
        <DataTable columns={columns} data={data} />
      ) : (
        <p>insert cards here...</p>
      )}
    </>
  );
}

为什么原来的window.innerWidth方案不合理？ #

1. SSR环境报错：服务端渲染时不存在window对象，直接调用会抛出错误，导致渲染失败。
2. 无实时响应：仅在组件挂载时判断一次屏幕宽度，用户调整窗口尺寸后，组件不会自动更新。
3. 断点逻辑脱节：手动设置的宽度（比如600px）和Tailwind官方断点（比如sm=640px）容易不一致，导致响应式行为和样式逻辑错位。

内容的提问来源于stack exchange，提问作者Mathew