Display and Position

There's a lot of classes related to how the element is displayed and positioned within the browser.

Display

Docs Try it

Let's talk about the display property. It's one of the richest and part of every element in HTML.

These classes allow you to modify the display property so that any element doesn't have to use it's standard display properties and can take on any other type of display properties in CSS.

Let's take a look at our example though.

We have the block, inline an inline-block classes. Block is meant for large areas of content and each block section appears on a new line.

Inline isn't allowed a width or heights.

When you choose the inline-block, you have an inline that can take width and heights. Unless there is no spacing between tags, there will be spacing between inline-block items.

There are a number of classes related to different parts of table elements. That lets any element emulate a table's properties. You'll probably never use this one, but you can take a look at the example.

There's support for the two newer layout types. Flex and grid. More on those later.

There's a couple of interesting ones that you might not have used before. Flow root is the Tailwind equivalent of the clearfix and is meant to clear floated elements.

Contents is super interesting in tha it creates a phantom piece of content that can act as it's own element.

Finally hidden is mean or hiding certain elements.

Position

static fixed absolute relative sticky

Docs Try it

Position matches the css positioning atribute

static is the default and means that the element is positioned where it would normally go in the page. Static will also ignore offsets.

Relative means that the element is placed relative to where it would normally go, but you can use offsets to move the element by a certain amounts.

Absolute positions an element outside the normal flow as if it didn't exist. Offsets happen from the nearest parent that has a position other than static.

Fixed means that it is positioned relative to the viewport. Normally the browser window.

Sticky is one of the newer attributes and means that the element is positioned as relative until it crosses a certain point.

Top Right Bottom Left

• (-)(SID)(-DIR)(-SIZ)
  • SID
    inset top right bottom left
  • DIR
    x y
  • SIZ
    
    0 0.5 1 1.5 2 2.5 3 3.5 4 5 6

7 8 9 10 11 12 14 16 20 24 28

32 36 40 44 48 52 56 60 64 72 80 96

1/2 1/3 2/3 1/4 2/4 3/4 1/5 2/5 3/5

4/5 1/6 2/6 3/6 4/6 5/6 1/12 2/12 3/12

4/12 5/12 6/12 7/12 8/12 9/12 10/12 11/12

auto px full

Docs Try it

These directions allow you to position elements in almost any way you want. There is a large range of directions and positions you can use.

inset affects both sides. Also, the numbered sizes are sized relative to the root em, which is normally 16 pixels. A size of 4 in these sizes is 1 rem.

px means a single pixel, while the keyword full means 100% and auto means the browser decides.