Tailwind CSS Alignment Complete Reference
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 Justify Content
- Tailwind CSS Justify Items
- Tailwind CSS Justify Self
- Tailwind CSS Align Content
- Tailwind CSS Align Items
- Tailwind CSS Align Self
- Tailwind CSS Place Content
- Tailwind CSS Place Items
- Tailwind CSS Place Self
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
.png)
