Tailwind CSS home page
Tailwind CSS on GitHub

Place Self

Utilities for controlling how an individual item is justified and aligned at the same time.

Default class reference

Class
Properties
place-self-autoplace-self: auto;
place-self-startplace-self: start;
place-self-endplace-self: end;
place-self-centerplace-self: center;
place-self-stretchplace-self: stretch;

Auto

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

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

Start

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

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

Center

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

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

End

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

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

Stretch

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

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

Responsive

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.

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

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 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:

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

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:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     placeSelf: false,
    }
  }
← Place ItemsPadding →