如何强制Tailwind在桌面设备上使用移动课程？

Question

我正在使用 Tailwind CSS。我的 CSS 支持两种设计尺寸：

例如，我有这样的CSS：

<img class="w-16 md:w-32 src="..." />

我正在构建一个管理表单，用户可以在其中填写表单字段（左侧），然后查看稍后如何呈现（右侧）。

右侧预览有桌面/移动切换。我不确定当用户将预览切换到“移动模式”时如何强制 Tailwind 使用移动类。

问题在于 Tailwind 类（例如

w-16 md:w-32

）指的是视口的大小。但是，在这种情况下，我想当用户使用桌面设备时呈现移动类。

当用户按下“移动”切换按钮时（即使它们位于桌面设备上），如何强制 Tailwind 使用移动类？

Answer 1

有点晚了，但我一直在寻找类似的解决方案，但 iFrame 在我的实现中不起作用。

找到了一个 Tailwind 包，它完全符合我的要求，但仍然需要对您正在使用的查询进行一些编辑。该软件包是 tailwindcss-container-queries：https://github.com/tailwindlabs/tailwindcss-container-queries

在预览容器上，为 @container 添加一个类

然后搜索并替换您的代码库中的 sm:、md: 等，并将它们替换为 @sm: 和 @md:

这应该根据容器而不是视口调整大小。