Justify Self

Auto

Use justify-self-auto to align an item based on the value of the grid’s justify-items property:

Start

Use justify-self-start to align a grid item to the start its inline axis:

Center

Use justify-self-center to align a grid item along the center its inline axis:

End

Use justify-self-end to align a grid item to the end its inline axis:

Stretch

Use justify-self-stretch to stretch a grid item to fill the grid area on its inline axis:

Responsive

To control the alignment of a grid item inside its grid area at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:justify-self-end to apply the justify-self-end utility at only medium screen sizes and above.

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

Customizing

Variants

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

You can control which variants are generated for the justify-self utilities by modifying the justifySelf property in the variants section of your tailwind.config.js file.

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

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       justifySelf: ['hover', 'focus'],
      }
    }
  }

Disabling

If you don't plan to use the justify-self utilities in your project, you can disable them entirely by setting the justifySelf property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     justifySelf: false,
    }
  }