Skip to content
Related Articles

Related Articles

Tailwind CSS Alignment Complete Reference

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

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.

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!