is now part of Shuffle™. The new editor includes templates for Tailwind CSS, Bootstrap, Bulma, and Material-UI.
Switch to Shuffle →
← Tailwind CSS classes list

Tailwind CSS class: .table-auto / .table-fixed

<table class="table-auto">
  <thead>
    <tr>
      <th class="px-4 py-2">Header 1</th>
      <th class="px-4 py-2">Header 2</th>
      <th class="px-4 py-2">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Lorem ipsum dolor sit amet</td>
      <td class="border px-4 py-2">Lorem</td>
      <td class="border px-4 py-2">Lorem</td>
    </tr>
    <tr class="bg-gray-100">
      <td class="border px-4 py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi eget augue consequat dolor posuere dignissim.
        Duis libero purus, sodales eget erat in, condimentum placerat orci.</td>
      <td class="border px-4 py-2">Lorem</td>
      <td class="border px-4 py-2">Lorem</td>
    </tr>
  </tbody>
</table>

<table class="table-fixed">
  <thead>
    <tr>
      <th class="w-1/2 px-4 py-2">Header 1</th>
      <th class="w-1/4 px-4 py-2">Header 2</th>
      <th class="w-1/4 px-4 py-2">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Lorem ipsum dolor sit amet</td>
      <td class="border px-4 py-2">Lorem</td>
      <td class="border px-4 py-2">Lorem</td>
    </tr>
    <tr class="bg-gray-100">
      <td class="border px-4 py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi eget augue consequat dolor posuere dignissim.
        Duis libero purus, sodales eget erat in, condimentum placerat orci.</td>
      <td class="border px-4 py-2">Lorem</td>
      <td class="border px-4 py-2">Lorem</td>
    </tr>
  </tbody>
</table>

Preview

Header 1 Header 2 Header 3
Lorem ipsum dolor sit amet Lorem Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget augue consequat dolor posuere dignissim. Duis libero purus, sodales eget erat in, condimentum placerat orci. Lorem Lorem
Header 1 Header 2 Header 3
Lorem ipsum dolor sit amet Lorem Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget augue consequat dolor posuere dignissim. Duis libero purus, sodales eget erat in, condimentum placerat orci. Lorem Lorem

CSS source

.table-auto { table-layout: auto; }
.table-fixed { table-layout: fixed; }

More in Tailwind CSS Table