How do I make a full-screen hero section with centered content in Tailwind CSS?
Asked on Sep 06, 2025
Answer
Creating a full-screen hero section with centered content in Tailwind CSS involves using utility classes for layout and alignment. You can achieve this by using flexbox utilities to center the content both vertically and horizontally.
<!-- BEGIN COPY / PASTE -->
<div class="h-screen flex items-center justify-center bg-blue-500">
<div class="text-center text-white">
<h1 class="text-4xl font-bold">Welcome to Our Website</h1>
<p class="mt-4 text-lg">We're glad you're here.</p>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "h-screen" class sets the height of the hero section to the full height of the viewport.
- "flex", "items-center", and "justify-center" classes are used to center the content both vertically and horizontally.
- "bg-blue-500" sets a background color, which you can customize as needed.
- Text alignment and styling are managed with "text-center", "text-white", and other text utility classes.
Recommended Links: