How in tailwindcss table hide column on small devices?

With tailwindcss 2 I want to hide some columns in the table on small devices using 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>

I expected that on devices 640px and smaller 2 columns would be hidden, but failed.

Which syntax is correct?

Thanks

Solution

Tailwind uses a mobile first breakpoint system, meaning, if you use hidden class, it will affect all the screen sizes. But if you attach a prefix such as sm, md, lg, xl and 2xl it will target the corresponding screen size and above it. You can read more about it here.

For example, using sm:hidden will only hide the element on sm and above screen size. So, you could combine it together such as, hidden md:table-cell it will not show on screen size lower than sm breakpoint.