如何在顺风CSS中隐藏手机上的特定文本?

Question

我有这个代码：

<div class="max-w-7xl mx-auto grid sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
<div class="col-start-2 col-span-2">
<h3 class="text-4xl pb-3">Text 1</h3>
<p class="text-2xl">Text 2</p>
</div>
</div>

我需要在移动设备上隐藏整个div。我已经尝试了这个 GitHub 问题的建议： https://github.com/tailwindlabs/tailwindcss/issues/841

<div class="hidden md:block max-w-7xl mx-auto grid sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
<div class="col-start-2 col-span-2">
<h3 class="text-4xl pb-3">Text 1</h3>
<p class="text-2xl">Text 2</p>
</div>
</div>

但这并不能掩盖任何事情。然后，我通过添加invisible md:visible尝试了以下代码

<div class="invisible md:visible max-w-7xl mx-auto grid sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
<div class="col-start-2 col-span-2">
<h3 class="text-4xl pb-3">Text 1</h3>
<p class="text-2xl">Text 2</p>
</div>
</div>

这有效，但它不会隐藏div，根据具体情况，这不会影响布局渲染： https://developer.mozilla.org/docs/Web/CSS/visibility
在 Tailwind CSS 中实现此目的的正确方法是什么？当然，我可以添加自定义 css 以将其隐藏在小断点上，但我认为这不是处理此问题的 propper 方法。

Answer 1

在第二个示例中，您将用grid覆盖hidden，这也是一个显示实用程序。您的代码应该是：

<!-- remove grid after mx-auto -->
<div class="hidden md:block max-w-7xl mx-auto sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
<div class="col-start-2 col-span-2">
<h3 class="text-4xl pb-3">Text 1</h3>
<p class="text-2xl">Text 2</p>
</div>
</div>

如果您使用的是支持 Tailwind 的 IDE 或编辑器，则当您有两个类执行相同的操作时，您会收到警告。就我个人而言，我将VS Code与Tailwind CSS Intellisense一起使用，但是还有很多其他选项，它们将帮助您防止这样的小错误。