How to Align Form Elements to Center using Tailwind CSS?
Last Updated :
23 Jul, 2025
Form elements are parts of a webpage that let users enter information. They include things like text boxes, checkboxes, radio buttons, dropdown menus, and buttons. To center form elements using Tailwind CSS, use classes like flex, items-center, and justify-center on a parent container.
These are the following approaches to align form elements to the center using Tailwind CSS:
Using Flexbox
Using Flexbox in Tailwind CSS makes it easy to center form elements. First, wrap your form elements in a div to create a flex container. Then, apply to classes like flex, items-center, and justify-center to center them both vertically and horizontally. Finally, use flex-col if you want the elements to stack vertically.
Syntax:
<div class="flex flex-col justify-center items-center">
....
</div>
Example: In this example, we will align form elements to the center using flexbox alignment.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Centered Form with Flexbox</title>
<link href=
"https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body class="h-screen flex justify-center items-center">
<div class="flex flex-col items-center">
<p class="text-green-700 text-xl mb-3">
Welcome
</p>
<form class="flex flex-col gap-2 w-full max-w-xs">
<input
aria-label="Enter your email address"
type="text"
placeholder="Email address"
class="
text-sm text-gray-base py-5 px-4 border border-gray-200 rounded" />
<input
aria-label="Enter your password"
type="password"
placeholder="Password"
class="text-sm text-gray-base py-5 px-4 border
border-gray-200 rounded" />
<button
type="submit"
class="bg-green-400 w-full mt-4">
Login
</button>
</form>
</div>
</body>
</html>
Output:
OutputUsing Grid
Using Grid in Tailwind CSS makes it easy to center form elements. First, wrap your form in a div to create a grid container. Then, apply the classes grid and place-items-center to center the items. Finally, use the h-screen to make sure the grid takes the full height of the screen.
Example: In this example we will align form elements to center using grid layout
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Centered Form with Grid Layout</title>
<link href=
"https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body class="h-screen grid place-items-center">
<div class="text-center">
<p class="text-green-700 text-xl mb-3">
Welcome
</p>
<form class="grid gap-2 w-full max-w-xs">
<input aria-label="Enter your email address"
type="text"
placeholder="Email address"
class="text-sm text-gray-base py-5
px-4 border border-gray-200 rounded" />
<input aria-label="Enter your password"
type="password"
placeholder="Password"
class="text-sm text-gray-base py-5
px-4 border border-gray-200 rounded" />
<button type="submit" class="bg-green-400 w-full mt-4">
Login
</button>
</form>
</div>
</body>
</html>
Output:
Output
Similar Reads
How to centre an Element using Tailwind CSS ? Tailwind CSS follows a utility-first approach, which means that instead of writing custom CSS for each component, we can utilize pre-defined classes that apply specific styles directly to HTML elements. We can center an element by using the utility classes of "margin" and "flex". This article will g
3 min read
How to Fixed an Element to Center in Tailwind CSS? Here are two different methods to center an elementwith Tailwind CSS.1. Using mx-auto ClassWe can use the 'mx-auto' utility class to center an element horizontally. The "mx-auto" class centers an element horizontally within its parent container by setting the left and right margins of the element to
2 min read
How to align block elements to center using CSS ? Block elements are known for taking up the full line space, forcing other elements to start on a new line. This means they have a width of 100% of the webpage or container holding the block. In this article, we will explore how block elements usually behave and how to center them using CSS. Table of
3 min read
How to Align Two Elements Left and Right Using Tailwind CSS? To align two elements left and right means placing one element on the left and the other on the right, within the same container. This layout is often used in headers, footers, or navigation bars to create a clean, balanced design.In Tailwind CSS, you can easily do this using flow-root or using Tail
3 min read
How to Center an Image using Tailwind CSS ? Here are the methods to center an image using Tailwind CSS:Method 1. Using Flexbox ClassesThis method centers the image both horizontally and vertically using Tailwind's flex, justify-center, and items-center classes.HTML<html> <head> <script src="https://cdn.tailwindcss.com/3.4.16"
2 min read
How to create a Popup Form using Vue.js & Tailwind CSS ? We'll create a simple popup form using Vue.js and Tailwind CSS. The form will allow users to input their email address and password. A button will open the form in the popup modal and users can submit the form or close it. Prerequisites HTMLTailwind CSSVue.jsApproachWe'll create a popup form using V
2 min read