如何在 Tailwind 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 以将其隐藏在小断点处，但我认为这不是处理此问题的正确方法。

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>

如果您使用的是 IDE 或支持 Tailwind 的编辑器，当您有两个类做同样的事情时，您会收到警告。我个人使用 VS Code with Tailwind CSS Intellisense，但还有很多其他选项，它们将帮助您防止像这样的小错误。

如何在 Tailwind CSS 中隐藏移动设备上的特定文本？

How to hide specific text on mobile in Tailwind CSS?

css

tailwind-css