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
Please Login to comment...