如何用Tailwind CSS实现React模态框小屏全屏、大屏动态宽度？

核心问题原因 #

你之前用lg:w-[${width || '450px'}]没生效，是因为Tailwind的JIT编译器只能识别静态明确的类名，动态拼接的类名在构建时会被忽略，不会生成对应的CSS规则。而内联样式会覆盖所有屏幕的宽度，所以冲掉了小屏的全屏设置。

方法一：CSS变量 + Tailwind响应式类（推荐，支持任意动态宽度） #

这是最灵活的方案，既能保留Tailwind的响应式特性，又能实现大屏动态宽度：

1. 在模态框根元素上定义CSS变量，把动态宽度值传入
2. 用Tailwind的lg:w-[var(--modal-width)]绑定变量，小屏用w-full保持全屏

代码示例：

const Modal = ({ width = '450px' }) => {
  return (
    <div
      className="w-full lg:w-[var(--modal-width)]"
      // 通过内联样式注入CSS变量，仅在大屏生效
      style={{ '--modal-width': width }}
    >
      {/* 模态框内容 */}
    </div>
  );
};

方法二：预设宽度配置（适合固定宽度场景） #

如果你的模态框宽度只有几个固定选项（比如300px、450px、600px），可以在Tailwind配置里预定义宽度类，然后动态选择：

1. 编辑tailwind.config.js，扩展宽度主题：

module.exports = {
  theme: {
    extend: {
      width: {
        'modal-sm': '300px',
        'modal-md': '450px',
        'modal-lg': '600px',
      },
    },
  },
};

2. 组件里动态拼接类名：

const Modal = ({ width = 'modal-md' }) => {
  return (
    <div className={`w-full lg:w-${width}`}>
      {/* 模态框内容 */}
    </div>
  );
};

方法三：CSS媒体查询（无需Tailwind响应式类） #

如果不想用Tailwind的响应式语法，也可以用原生CSS媒体查询结合内联样式，注意React内联样式不直接支持媒体查询的话，可改用CSS模块或CSS-in-JS库：

const Modal = ({ width = '450px' }) => {
  return (
    <div
      className="w-full"
      style={{
        // 仅在大屏幕（lg=1024px及以上）应用动态宽度
        '@media (min-width: 1024px)': {
          width: width,
        },
      }}
    >
      {/* 模态框内容 */}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Prosy A.