如何在 tailwindcss 表中隐藏小型设备上的列？

Question

使用 tailwindcss 2，我想使用以下方法隐藏小型设备上表中的一些列sm:hidden：

<table class="table-auto">
  <thead class="bg-gray-700 border-b-2 border-t-2 border-gray-300">
    <tr>
      <th class="py-2">Name</th>
      <th class="py-2">Active</th>
      <th class="py-2">Type</th>
      <th class="py-2 sm:hidden">Category</th>
      <th class="py-2 sm:hidden">Mailchimp Id</th>
      <th class="py-2"></th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td class="">
        Name content
      </td>
      <td class="">
        Active content
      </td>
      <td class="">
        Typecontent
      </td>

      <td class="  sm:hidden">
        Category content
      </td>

      <td class="sm:hidden">
        mailchimp content
      </td>

我预计在 640px 和更小的设备上会隐藏 2 列，但失败了。

哪种语法是正确的？

谢谢

Answer 1

Tailwind 使用移动优先断点系统，这意味着，如果您使用hidden类，它将影响所有屏幕尺寸。sm但是，如果您附加诸如、md、lg、xl等前缀2xl，它将针对相应的屏幕尺寸及其上方。你可以在这里读更多关于它的内容。

例如，使用sm:hidden只会隐藏 sm 及以上屏幕尺寸的元素。因此，您可以将其组合在一起，例如，hidden md:table-cell它不会显示在小于sm断点的屏幕尺寸上。