Class reference

Start Default

Use .justify-start to justify items against the start of the flex container’s main axis:

Center

Use .justify-center to justify items along the center of the flex container’s main axis:

End

Use .justify-end to justify items against the end of the flex container’s main axis:

Space between

Use .justify-between to justify items along the flex container’s main axis such that there is an equal amount of space between each item:

Space around

Use .justify-around to justify items along the flex container’s main axis such that there is an equal amount of space around each item:

Responsive

To justify flex items at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:justify-between to apply the justify-between utility at only medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

all

sm

md

lg

xl

Customizing

Responsive and State Variants

By default, only responsive variants are generated for justify-content utilities.

You can control which variants are generated for the justify-content utilities by modifying the flexbox property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the justify-content utilities.

Disabling

If you don’t plan to use the justify-content utilities in your project, you can disable them entirely by setting the flexbox property to false in the modules section of your config file:

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the justify-content utilities.