使用 Tailwind CSS 隐藏移动版本的内容并在桌面上可见

Question

我尝试使用 Tailwind hidden class 仅在移动屏幕上隐藏我页面中的内容，但它在桌面版中隐藏，在移动版中可见。 我想要相反的。

我的代码：

<nav class="hidden lg:block">abc</nav>

我还尝试使用visible和invisible的实用程序类，但这根本不起作用。

Answer 1

为什么不直接使用@media 查询？ 您可以使用此 css 在桌面上显示某些内容并在移动设备上隐藏它们：

@media (max-width:1024px){
        .yourclassname {
            display:none;
        }

Answer 2

您可以简单地使用移动屏幕的sm断点。 并将以下 class 分配给该组件。

class = "hidden sm:block"

 <script src="https://cdn.tailwindcss.com"></script> <div class="absolute inset-0 bg-slate-400 bg-center"></div> <div class="hidden sm:block relative bg-white px-6 pt-10 mt-10 pb-8 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"> <.-- ignore this code of card --> <div class="mx-auto max-w-md"> <div class="divide-y divide-gray-300/50"> <div class="space-y-6 py-8 text-base leading-7 text-gray-600"> <ul class="space-y-4"> <li class="flex items-center"> <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="11" /> <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" /> </svg> <p class="ml-4"> Customizing your <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file </p> </li> <li class="flex items-center"> <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="11" /> <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" /> </svg> <p class="ml-4"> Extracting classes with <code class="text-sm font-bold text-gray-900">@apply</code> </p> </li> <li class="flex items-center"> <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="11" /> <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" /> </svg> <p class="ml-4">Code completion with instant preview</p> </li> </ul> </div> </div> </div> <!-- card code ends --> </div> </div>

您还可以在此处查看示例