如何在React中无需Tailwind实现类Tailwind的内联媒体查询？

可行，直接用Tailwind的任意值语法就能实现，无需修改配置或编写额外CSS文件。

具体写法示例 #

比如你想要元素在视口宽度达到900px后隐藏，内联类可以这么写：

<div className="[@media(min-width:900px)]:hidden">Hello</div>

原理说明 #

• Tailwind支持用方括号[]包裹自定义的媒体查询规则，这是任意值语法的核心用法，能直接在内联类中实现自定义断点的样式控制。
• 上述代码中，[@media(min-width:900px)]:hidden表示当视口宽度≥900px时，为元素添加hidden类，达到和md:hidden类似的效果，只是断点换成了你自定义的900px。
• 如果需要反向逻辑（默认隐藏、自定义断点后显示），可以调整为：className="hidden [@media(min-width:900px)]:block"

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