Question

Utilities for controlling the alignment of a caption element inside of a table.

Quick reference

Class	Properties
caption-top	caption-side: top;
caption-bottom	caption-side: bottom;

Basic usage

Top

Use caption-top to position a caption element at the top of a table.

Table 3.1: Professional wrestlers and their signature moves.

Wrestler	Signature Move(s)
"Stone Cold" Steve Austin	Stone Cold Stunner, Lou Thesz Press
Bret "The Hitman" Hart	The Sharpshooter
Razor Ramon	Razor's Edge, Fallaway Slam

<table>
  <caption class="caption-top">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

Bottom

Use caption-bottom to position a caption element at the bottom of a table.

Table 3.1: Professional wrestlers and their signature moves.

Wrestler	Signature Move(s)
"Stone Cold" Steve Austin	Stone Cold Stunner, Lou Thesz Press
Bret "The Hitman" Hart	The Sharpshooter
Razor Ramon	Razor's Edge, Fallaway Slam

<table>
  <caption class="caption-bottom">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

---

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:caption-bottom to only apply the caption-bottom utility on hover.

<table class="caption-top hover:caption-bottom">
  <!-- ... -->
</table>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:caption-bottom to apply the caption-bottom utility at only medium screen sizes and above.

<table class="caption-top md:caption-bottom">
  <!-- ... -->
</table>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.