Place Self

    Auto

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

    Use place-self-start to align an item to the start on both axes:

    Place Self - 图2

    1. <div class="grid grid-cols-3 gap-2 ...">
    2.   <div class="place-self-start ...">2</div>
    3.   <div>3</div>
    4.   <div>4</div>
    5.   <div>5</div>
    6.   <div>6</div>
    7. </div>

    Center

    Use place-self-center to align an item at the center on both axes:

    Use place-self-end to align an item to the end on both axes:

    1. <div class="grid grid-cols-3 gap-2 ...">
    3.   <div class="place-self-end ...">2</div>
    4.   <div>3</div>
    5.   <div>4</div>
    6.   <div>6</div>
    7. </div>

    Stretch

    Use place-self-stretch to stretch an item on both axes:

    Place Self - 图5

    To place an item at a specific breakpoint, add a {screen}: prefix to any existing place-self utility. For example, use md:place-self-end to apply the place-self-end utility at only medium screen sizes and above.

    1. <div class="place-self-start md:place-self-end">
    2.   <!-- ... -->

    Customizing

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

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

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

    Disabling

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

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     placeSelf: false,
    6.     }

     Padding→