Tailwind CSS - Place Self

Modern Guide to Tailwind CSS: Place Self

The place-self utility in Tailwind CSS is a powerful shorthand for controlling the alignment of a single grid item along both the block (vertical) and inline (horizontal) axes simultaneously within a grid container. It combines the functionality of align-self and justify-self.

Understanding the Core Concept

Before using place-self, it’s crucial to understand its context. It only applies to direct children of a CSS Grid container (display: grid). It provides a way to override the container’s alignment properties (set by place-items or justify-items/align-items) for a specific item.

Place Self Utilities

Here is a breakdown of the available place-self utilities and their corresponding CSS properties.

Class	CSS Properties	Description
place-self-auto	place-self: auto;	The item is aligned based on the parent grid’s place-items value. This is the default behavior.
place-self-start	place-self: start;	Aligns the item to the start of its grid area on both axes.
place-self-end	place-self: end;	Aligns the item to the end of its grid area on both axes.
place-self-center	place-self: center;	Aligns the item to the center of its grid area on both axes.
place-self-stretch	place-self: stretch;	Stretches the item to fill its entire grid area on both axes.

Practical Example: Highlighting a Feature Card

Imagine a 3-column product grid where you want one specific product card to be centered within its grid cell to draw attention. The other cards should stretch to fill their cells (the default behavior).

First, let’s set up a basic project environment. It’s best practice to use Node.js and a package manager like npm for modern web development.

Development Setup (Recommended)

# 1. Install Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init

# 2. Configure your tailwind.config.js
module.exports = {
  content: ['./*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 3. Create an input CSS file (e.g., src/input.css)
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. Run the build process
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Example Code (index.html)

This example shows a grid where all items default to the container’s alignment (place-items-center), but one specific item uses place-self-start to override it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Place Self Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8">

  <h1 class="text-3xl font-bold mb-4 text-slate-800">Product Showcase</h1>

  <div class="grid grid-cols-3 gap-4 bg-slate-300 p-4 rounded-lg h-96 place-items-center">

    <div class="bg-white rounded-lg p-4 shadow-md text-center w-32 h-32 flex items-center justify-center">
      Item 1
    </div>

    <!-- This item overrides the parent's alignment -->
    <div class="bg-indigo-500 text-white rounded-lg p-4 shadow-xl text-center w-32 h-32 flex items-center justify-center place-self-start">
      Item 2 (place-self-start)
    </div>

    <div class="bg-white rounded-lg p-4 shadow-md text-center w-32 h-32 flex items-center justify-center">
      Item 3
    </div>

  </div>

</body>
</html>

Responsive Design with place-self

A key feature of Tailwind is its responsive modifiers. You can change an item’s alignment based on the screen size. For example, an item might be stretched on mobile but centered on larger screens.

<!-- This item is stretched by default, but centered on medium screens (md) and larger -->
<div class="place-self-stretch md:place-self-center ...">...</div>

Common Mistakes & Debugging

• Mistake: Trying to use place-self on a flexbox item. place-self is for grid layouts. For flexbox, use self-start, self-center, self-end, etc., which control alignment on the cross-axis via align-self.
• Debugging Tip: If place-self isn’t working, check the parent element. It must have display: grid (or inline-grid). Use your browser’s developer tools to inspect the computed styles of both the parent and the item.