Other Properties

There's a few other that control the visibility or opacity and what happens when elements are too big.

Z-Index

• z-(AMT)
  • SID
    0 10 20 30 40 50 auto

Docs Try it

Content is layered in CSS using a property called the z-index. Tailwind gives you 0 plus 5 other values you can use, plus auto. Remember that you can add your own by modifying the tailwind.config.js file.

Visibility

visible invisible

Docs Try it

A couple of classes to make elements show or hide throught their CSS visibility properties. Remember that these can be used with responsive variants to make things show up or hide at different breakpoints.

However, these only hide the elements while leaving their space showing. If you want to completely hide elements, then use the display properties instead.

Opacity

• opacity-AMT
  • AMT (opacity/100)
    
    0 5 10 20 25 30 40 50
60 70 75 80 90 95 100

Docs Try it

You can apply opacity to any element or to individual items within an element, so for example some items like the background allow you to change the opacity of just the background, but not the rest of the items, that's pretty powerful, but there is an overall opacity value as well.

Overflow

• overflow(-DIR)(-TYP)
  • DIR (overflow)
    
    x y
  • TYP (overflow)
    
    auto hidden visible scroll

Docs Try it

Overflow controls what happens once an element gets too big to hold it's container.

You can use the overflow class and then optionally add a direction, which is x or y. This will force the overflow to happen only on a specific direction.

Then you can add a type, which is the value of the parameters. That can be auto, which is the default, where it automatically tries to calculate what you need, or hidden, where it hides whatever the overflow is, visible, where it shows the content ignoring the container, scroll, where it gives you scrollbars.

If you take a look at the example, you can see that I've had to adjust a few of the elements being displayed depending on what I was trying to show. The yellow is the background color for the container.

Overscroll

• overscroll(-DIR)(-TYP)
  • DIR
    
    x y
  • TYP
    
    auto contain none

Docs Try it

Overscroll controls what happens when an element that is set to scroll is done scrolling. You can control the direction that is affected by this as well as the type.

auto is the default behavior and means that the page will continue to scroll.

contain means that once the item stops scrolling the rest of the page will not scroll.

Finally none is similar to contain, but also prevents bounce effects when scrolling past the end of the container.