Skip to content
Related Articles

Related Articles

Tailwind CSS Justify Self

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
View Discussion
Improve Article
Save Article

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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!