tailwindcss/docs/source/overflow.md

891 B

extends title
_layouts.markdown Overflow

Overflow

The overflow utilities are simply overflow property helpers.

<div class="overflow-auto"></div>
<div class="overflow-hidden"></div>
<div class="overflow-visible"></div>
<div class="overflow-scroll"></div>
<div class="overflow-scroll-x"></div>
<div class="overflow-scroll-y"></div>
<div class="mask"></div>


div {
  .overflow-auto;
  .overflow-hidden;
  .overflow-visible;
  .overflow-scroll;
  .overflow-scroll-x;
  .overflow-scroll-y;
  .mask;
}

Note that .overflow-hidden is available in a shorthand called .mask.

Responsive

The display utitlies can also be used with responsive prefixes:

<div class="overflow-auto sm:overflow-hidden md:overflow-visible lg:overflow-scroll"></div>
div {
  .screen(lg, {
    .overflow-scroll;
  });
}