Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Justify Self

  • Last Updated : 09 Feb, 2021

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 :