如何在手机上隐藏尾风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>

我得在手机上把这整部衣服藏起来。我已经尝试过来自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

在尾风CSS中实现这一目标的正确方法是什么？当然，我可以添加自定义css来将其隐藏在小断点上，但我认为这不是解决这个问题的首选方法。

Answer 1

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

<!-- 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>

如果您使用IDE或编辑器并支持Tailwind，那么当您有两个类做同样的事情时，您会收到警告。就我个人而言，我使用VS代码与尾风CSS智能感知，但有很多其他的选择，他们将帮助你防止这样的小错误。