tailwindcss：如何在浏览器调整大小时隐藏和显示（切换）html 带有媒体查询的元素？

Question

tailwindcss 媒体查询是移动优先的，因此说我正在尝试为我的媒体查询的每个级别激活 html 元素。

这是我得到的，当我调整浏览器大小时它不起作用 window:

<template>
  <div>
    <span class="m-1 hidden xl:inline">
      XL
    </span>
    <span class="m-1 hidden lg:inline xl:hidden">
      L
    </span>
    <span class="m-1 hidden md:inline lg:hidden">
      M
    </span>
    <span class="m-1 hidden sm:inline md:hidden">
      S
    </span>
    <span class="m-1 inline sm:hidden">
      XS
    </span>
  </div>
</template>

媒体查询在 tailwind 中的工作方式是否存在逻辑错误？

或者，如果 display: none; 已设置，那么困难的部分可能是覆盖？（然后我猜这是一个css问题）XS似乎可以工作。

Answer 1

我试过你的例子，当我调整 window 的大小时，它在顺风操场上对我来说非常有效。您确定类通过了构建过程吗？当您调整 window 大小时，您想一次显示一个文本。每个断点一个，如果我做对了。

tailwindcss：如何在浏览器调整大小时隐藏和显示（切换）html 带有媒体查询的元素？

tailwindcss: How to hide and show (toggle) html elements with media queries on browser resizes?

html

css

tailwind-css