Open In App
Related Articles

Tailwind CSS Alignment Complete Reference

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

Tailwind CSS is basically a utility first CSS framework for rapid custom UI. Tailwind CSS Alignment controls how the flex and grid items are aligned along with the container for fast front-end development. suppose Tailwind CSS Justify Content controlling how flex and grid items are positioned along a container’s main axis and Justify items controlling how grid items are aligned along their inline axis.

Tailwind CSS Class

Description

Example

Justify ContentIt describe the alignment of the flexible box container.
Try
Justify ItemsIt controls how grid items are aligned along their inline axis.
Try
Justify SelfIt specifies the alignment of a content’s position along with the appropriate axis.
Try
Align ContentIt specifies the alignment between the lines inside a flexible container.
Try
Align ItemsIt aligns the flex Items across the axis.
Try
Align SelfIt controls how an individual flex or grid item is positioned along its container’s cross axis.
Try
Place ContentIt controls how content is justified and aligned at the same time.
Try
Place ItemsIt controls how items are justified and aligned at the same time.
Try
Place SelfIt controls how an individual item is justified and aligned at the same time.
Try

Below example will give you a brief idea about the Backgrounds of Tailwind CSS:

Example:

HTML

<!DOCTYPE html>
<html>
    <head>
        <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
            rel="stylesheet" />
    </head>
  
    <body>
        <div class="h-screen flex flex-col
                    items-center justify-center">
            <p class="text-green-700 text-xl mb-3">
            Welcome to GeeksforGeeks
            </p>
  
  
            <form>
                <input aria-label="Enter your email address"
                       type="text" 
                       placeholder="Email address"
                       class="text-sm text-gray-base w-full
                            mr-3 py-5 px-4 h-2 border
                            border-gray-200 rounded mb-2" />
                <input aria-label="Enter your password"
                       type="password"
                       placeholder="Password"
                       class="text-sm text-gray-base w-full mr-3
                            py-5 px-4 h-2 border border-gray-200
                            rounded mb-2" />
  
                <button type="submit"
                        class="bg-green-400 w-full mt-4">
                    Login
                </button>
            </form>
        </div>
    </body>
</html>

                    

Output:

Tailwind CSS Alignment

Tailwind CSS Alignment



Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads