Justify Self

    v1.8.0+

    Utilities for controlling how an individual grid item is aligned along its inline axis.

    Auto

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

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

    1. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">1</div>
    2. <div class="justify-self-start text-gray-800 bg-gray-500 flex justify-center items-center px-4 py-2">2</div>
    3. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">3</div>
    4. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">4</div>
    5. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">5</div>
    6. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">6</div>
    7. </div>

    Center

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

    Justify Self - 图3

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

    1. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">1</div>
    2. <div class="justify-self-end text-gray-800 bg-gray-500 flex justify-center items-center px-4 py-2">2</div>
    3. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">4</div>
    4. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">5</div>
    5. <div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">6</div>
    6. </div>

    Stretch

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

    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 documentation.

    Customizing

    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 section of your tailwind.config.js file.

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

    1. // tailwind.config.js
    2. module.exports = {
    3. variants: {
    4. // ...
    5. - justifySelf: ['responsive'],
    6. + justifySelf: ['responsive', 'hover', 'focus'],
    7. }

    Disabling


    ← Justify Items