Open In App

Tailwind CSS Justify Self

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts two values in tailwind CSS. The different properties are covered in the class form. It is the alternative to the CSS justify-self property. This class is used to specify the alignment of a content’s position along with the appropriate axis in a CSS Grid.

Justify self class options:

  • justify-self-auto 
  • justify-self-start 
  • justify-self-end 
  • justify-self-center 
  • justify-self-stretch 

justify-self-auto: It is the value used to align an item based on the value of the grid’s justify-items class.

Syntax:

<element class="justify-self-auto">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Self Class</b
    <div id="main" class="grid justify-items-stretch grid-cols-2"
        <div class="justify-self-auto bg-green-500 rounded-lg m-4 h-12">
          1
        </div
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div
</body
  
</html>


Output:

justify-self-start: It allows the content to align itself to the left of the cell.

Syntax:

<element class="justify-self-start">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Self Class</b
    <div id="main" class="grid justify-items-stretch grid-cols-2"
        <div class="justify-self-start 
            bg-green-500 rounded-lg m-4 h-12">1</div
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div
</body
  
</html>


Output:

justify-self-end: It allows the content to align itself to the right of the cell.

Syntax:

<element class="justify-self-end">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Self Class</b
    <div id="main" class="grid justify-items-stretch grid-cols-2"
        <div class="justify-self-end bg-green-500 
            rounded-lg m-4 h-12">1</div
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div
</body
  
</html>


Output:

justify-self-center:  It allows the content to align itself to the center of the cell.

Syntax:

<element class="justify-self-center">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Self Class</b
    <div id="main" class="grid justify-items-stretch grid-cols-2"
        <div class="justify-self-center bg-green-500 
            rounded-lg m-4 h-12">1</div
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div
</body
  
</html>


Output:

justify-self-stretch: It is the default value of this property and it makes the content fill the whole width of the cell.

Syntax:

<element class="justify-self-stretch">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Self Class</b
    <div id="main" class="grid justify-items-stretch grid-cols-2"
        <div class="justify-self-stretch bg-green-500 
            rounded-lg m-4 h-12">1</div
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div
</body
  
</html>


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads