Table

Tailwind lets you use .table-auto to keep the default browser behavior of auto-spacing the columns of a table based on its content. If you want to explicitly specify column widths, you can use .table-fixed on the <table> element and then put an explicit width helper on each column of the table.

  • table: Sets display property to table
  • table-auto: Allows the table to automatically size columns
  • table-fixed: Sets table layout to fixed
  • border-collapse: Collapses table borders
  • border-separate: Separates table borders

Using span, you specify the number of columns or rows you want the cell to take up with .col-span-{count} or .row-span-{count}, where the suffix is the number of columns or rows.

<table class="table-auto border-collapse border border-gray-300">
  <thead>
    <tr class="bg-gray-100">
      <th class="border border-gray-300 px-4 py-2">Column 1</th>
      <th class="border border-gray-300 px-4 py-2">Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 px-4 py-2">Data 1</td>
      <td class="border border-gray-300 px-4 py-2">Data 2</td>
    </tr>
  </tbody>
</table>

Grid System

Tailwind's grid system is based on CSS Grid and provides a powerful way to create complex layouts.

  • grid: Creates a grid container
  • grid-cols-{n}: Specifies the number of columns
  • col-span-{n}: Spans an element across multiple columns
  • gap-{size}: Sets gap between grid items
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4 col-span-2">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

Flexbox

Tailwind provides utilities for working with Flexbox layouts.

  • flex: Creates a flex container
  • flex-{direction}: Sets flex direction (row, col, row-reverse, col-reverse)
  • justify-{alignment}: Aligns items along the main axis
  • items-{alignment}: Aligns items along the cross axis
<div class="flex flex-row justify-between items-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flexbox is often more useful than a grid layout for three reasons:

  1. A flexbox container has better controls for dynamically managing the size of elements.
  2. A flexbox container can automatically wrap its contents when they get too wide.
  3. Flexbox containers can be nested, giving you more control over layout.

Grids are useful for managing tabular content, but Flexbox is more flexible for adapting to different screen sizes.