Box Alignment

In addition to using flexbox to place items on the page, Tailwind includes utilities that allow us to be more specific about the alignment and justification of elements within the flexbox. These utilities also work for grid layouts, where appropriate.

We talked about how a flexbox container has a main axis and a cross axis. The Tailwind utilities that affect placement along the main axis start with .justify-, and utilities that affect placement across the cross axis do not. These names are chosen to match the names of the underlying CSS properties.

Main axis

Let’s look at the main axis first. Items can be placed along the main axis in two ways:

1. By placing items along the main axis of the entire flexbox.
2. By placing an individual item along the main axis of its own box within the flexbox container.

Both of these placements can be defined separately and include utilities that are properties of the parent flexbox container, not individual elements. ...