What a Tailwind hero is made of
The hero sits at the top of the page, in the area visitors see above the fold before they scroll.
A typical one is a container, a headline, a subheadline, some buttons and a media slot. The media slot is the part text-only layouts drop. The container caps the width and centers the content, usually with mx-auto max-w-7xl px-6. One h1 carries the main promise, and a p under it holds a line or two of supporting copy. The buttons are a primary action plus, often, a quieter secondary link. The media can be a screenshot, photo, illustration or video.
The primary button matters most. It is the call-to-action that the rest of the hero exists to support.
Component galleries add extras constantly. Creative Tim’s hero blocks put an announcement badge above the headline, and Material Tailwind’s hero set includes a lead-generation variant.
Others add an email field beside the button or lay a navbar over the top of the section.
On semantics, Flowbite’s build guide starts with a section element and calls for at least one h1 on the page. The hero is the obvious home for it.
How to build a basic Tailwind hero from scratch
The whole build is one short block of markup and no custom CSS.
- Install Tailwind with
npm install tailwindcss @tailwindcss/vite, add the plugin to the Vite config, and put @import "tailwindcss"; in the main CSS file (Tailwind CSS installation docs). - Wrap the content in a
section, with a div inside it carrying mx-auto max-w-7xl px-6 py-24 text-center. - Add an
h1 with text-5xl font-bold tracking-tight text-balance for the headline. - Add a
p with mx-auto mt-6 max-w-2xl text-lg for the subheadline, so the line length stays readable. - Build the button row with
mt-10 flex items-center justify-center gap-x-4. - Paste the markup into Tailwind Play, or resize the dev server window to a narrow width, and see how it holds up.
The finished markup looks like this:
<section class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-24 text-center">
<h1 class="text-5xl font-bold tracking-tight text-balance text-gray-900">
Ship the page, not the stylesheet
</h1>
<p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600">
One or two lines that say what the product does.
</p>
<div class="mt-10 flex items-center justify-center gap-x-4">
<a href="#" class="rounded-md bg-indigo-600 px-5 py-3 text-sm font-semibold text-white hover:bg-indigo-500">Get started</a>
<a href="#" class="text-sm font-semibold text-gray-900">Learn more</a>
</div>
</div>
</section>
The size jump from text-5xl to text-lg sets up the visual hierarchy. The headline gets read first, and the button gets found without any hunting.
text-balance sets text-wrap: balance, which evens out line lengths in short blocks. Use it on headlines, not body text.
The py-24 class adds 6rem of vertical padding. That’s the white space that keeps a short hero from feeling cramped.
Tailwind Labs’ v4.0 release notes (January 2025) report full builds dropping from 378ms to 100ms on the Catalyst project, and incremental rebuilds with new CSS from 44ms to 5ms.
That matters most while tuning a hero, when spacing and type classes get swapped over and over.
Which Tailwind hero layout fits your page?
Short copy and a single offer fit a centered hero. If there’s a product screenshot that needs room, go split. Full-screen is for brands carried by a photo, and a video background only makes sense when motion is the product.
| Layout | Key classes | Best for | Trade-off |
|---|
| Centered | flex flex-col items-center text-center | Short copy, one CTA | No room for product visuals |
| Split | grid items-center gap-12 lg:grid-cols-2 | SaaS with a screenshot | Image drops below copy on mobile |
| Full-screen image | relative min-h-screen, object-cover image | Brand, travel, events | Text needs an overlay to stay readable |
| Video background | absolute inset-0 size-full object-cover on the video | Motion-led brands | Heaviest of the four |
If the headline and subheadline fit on a few short lines, go centered. If the copy needs a full paragraph, go split.
Centered hero
Horizontal centering is text-center on the wrapper, plus mx-auto on any width-capped child such as the subheadline. For vertical centering, flex min-h-[70vh] flex-col items-center justify-center on the wrapper centers the stack inside a taller block.
Centered works until the copy passes three lines. After that the ragged edges start to look messy.
Split hero
A split hero gives the copy one column and the media the other. The wrapper becomes a two-column grid layout built from grid items-center gap-12 lg:grid-cols-2, so the columns stack on small screens and sit side by side from the lg breakpoint.
The media column usually holds a product screenshot or a hero image styled with rounded-xl shadow-xl.
Put the copy first in the markup so mobile and screen readers meet it before the image, then flip the visual order on desktop with lg:order-last on the media. Give the image w-full h-auto so it never overflows its column.
Full-screen hero
Full-screen heroes are the layout most often overdone.
The wrapper is relative isolate flex min-h-screen items-center, and the photo sits inside it as an img with absolute inset-0 -z-10 size-full object-cover. The object-cover class crops the photo to fill the box without stretching it (Tailwind object-fit docs).
One catch on phones. Per the Tailwind docs, min-h-screen maps to 100vh, while min-h-dvh follows the viewport as the browser toolbar expands and contracts.
Switch to min-h-dvh when a button near the bottom must stay visible. Most free cover blocks follow this pattern with a full background image, a black overlay and two CTAs.
Video background hero
A video background reuses the full-screen structure. The video element replaces the image and takes the same absolute inset-0 size-full object-cover classes.
The video also needs autoplay, muted, loop and playsinline attributes. Browsers apply autoplay blocking to media with an active audio track, so muted is not optional (MDN autoplay guide). The same guide suggests a poster image as the fallback when autoplay is denied.
Video adds the most weight of the four layouts. Keep the file short and compressed.
Gradient and image backgrounds in Tailwind v4
Gradients in v4 use bg-linear-to-r where v3 used bg-gradient-to-r. Photo backgrounds still pair bg-cover and bg-center, with a bg-black/50 layer on top so the text stays readable.
Gradient backgrounds
The v4 upgrade guide shows the rename in its own examples, and the npx @tailwindcss/upgrade tool rewrites the old classes automatically. The old bg-gradient-to-* names are still accepted in v4 for backward compatibility, so a pasted v3 gradient usually keeps rendering. The v3 leftover that does break a hero is bg-opacity-*, which v4 removed. An overlay written as bg-black bg-opacity-50 stops being translucent.
bg-gradient-to-r becomes bg-linear-to-r, and bg-gradient-to-br becomes bg-linear-to-br. For overlays, bg-black bg-opacity-50 becomes bg-black/50.
A working v4 hero background looks like bg-linear-to-br from-indigo-600 via-violet-600 to-purple-700.
v4 also adds angle utilities such as bg-linear-45, plus bg-radial and bg-conic. An interpolation modifier like bg-linear-to-r/oklch switches the color space.
Some third-party tutorials say v4 gradients interpolate in OKLCH by default. The official Tailwind docs say the default is oklab, and treat oklch as the opt-in modifier.
One failure shows up on three-stop gradients. A state variant such as dark:from-blue-500 keeps the base via color, so add dark:via-none to drop it (Tailwind upgrade guide).
To pick stop colors before writing any classes, a CSS gradient generator gets a first draft on screen fast. Then copy the stops into from-, via- and to- utilities.
Image with overlay
<section class="relative bg-[url(/img/hero.jpg)] bg-cover bg-center">
<div class="absolute inset-0 bg-black/50"></div>
<div class="relative mx-auto max-w-7xl px-6 py-32 text-center text-white">
<!-- headline, subheadline, buttons -->
</div>
</section>
The overlay is what makes white text readable on a photo. Raise bg-black/50 to bg-black/60 when the image is bright.
For the photo itself, use an img with object-cover when it’s real content, because it takes alt text and can be loaded with priority. Use bg-cover when the picture is decoration only.
How to make a Tailwind hero responsive and add dark mode
Write the mobile layout with unprefixed classes, then add sm:, md: and lg: prefixes for wider screens. Dark mode works through dark: variants, which follow the operating system setting in v4 until you override the variant for a manual toggle.
Minimum widths for the default breakpoints come from the Tailwind CSS responsive design docs.
sm: 640px (40rem)md: 768px (48rem)lg: 1024px (64rem)xl: 1280px (80rem)2xl: 1536px (96rem)
Responsive behavior
Tailwind is mobile-first. Unprefixed utilities apply at every width, and prefixed ones apply from that breakpoint upward.
The docs flag the usual slip. sm:text-center centers text only from 640px, not on phones, so write text-center sm:text-left when the mobile layout should differ.
A hero that scales cleanly looks like this:
<div class="mx-auto max-w-7xl px-6 py-16 text-center sm:py-24 lg:py-32">
<h1 class="text-4xl font-bold tracking-tight text-balance sm:text-5xl lg:text-6xl">
Headline
</h1>
<div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<!-- buttons -->
</div>
</div>
The headline steps up in size as the screen widens, because a fixed large size is heavy on a phone. Vertical padding grows from py-16 to lg:py-32, and the buttons stack on phones before moving into a row from sm. Decorative media can hide below lg with hidden lg:block.
None of this works without the viewport meta tag in the head, <meta name="viewport" content="width=device-width, initial-scale=1.0" />, which the Tailwind docs list as the first step.
Dark mode
Dark mode needs no setup in v4. The dark: variant follows the prefers-color-scheme media query by default, according to the Tailwind dark mode docs.
For a manual toggle, override the variant in the main CSS file:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
Now dark: utilities apply whenever a dark class sits higher in the HTML tree, usually on the html element.
On the hero, the section background is bg-white dark:bg-gray-950. The headline and subheadline pair text-gray-900 dark:text-white with text-gray-600 dark:text-gray-400.
Projects that already theme with attributes can use a data-theme=dark selector in the same override instead of a class.
Put the script that sets the class inline in the head. The docs warn that loading it later flashes the wrong theme.
Free and paid Tailwind hero libraries compared
Tailwind Plus was the first-party option, sold as a one-time purchase, until it closed to new customers in September 2026. HyperUI and Flowbite give you MIT-licensed code at no cost. daisyUI is the odd one out, since it swaps long utility strings for a semantic hero class.
| Library | Cost and license | Approach | Watch out for |
|---|
| Tailwind Plus | Was a one-time purchase, proprietary; closed to new customers | Copy-paste markup from Tailwind Labs | License barred resale in multi-client templates |
| Flowbite | Free, MIT; paid Pro tier | Markup plus optional Flowbite JS | Interactive parts need the JS |
| HyperUI | Free, MIT | Copy and paste, no install | Some vanilla JS, uneven dark mode |
| Preline UI | Free, MIT plus Fair Use License | Markup plus Preline JS | Two license documents to read |
| daisyUI | Open source plugin | Semantic classes: hero, hero-content | Class names need the plugin |
Tailwind Plus listed 12 hero sections and was sold as a one-time purchase with lifetime access. When Tailwind Labs joined Shopify on September 9, 2026, it closed sign-ups for new customers. Existing customers keep their access (Tailwind Labs).
The license ruled out using the code in a website or template that is resold to multiple clients.
Since new licenses are no longer sold, any Tailwind Plus price quoted in older articles no longer applies.
Preline UI is free for personal and commercial projects under the MIT License and the Preline UI Fair Use License, and its free templates include landing page layouts (Preline README, 2026).
HyperUI’s README says its components need no installation. Its FAQ adds that some interactive ones use a little vanilla JavaScript, and not all have dark mode variants.
In daisyUI, the same section looks like this:
<div class="hero min-h-screen bg-base-200">
<div class="hero-content flex-col lg:flex-row">
<!-- image, headline, button -->
</div>
</div>
daisyUI also ships hero-overlay, a class that covers a background image, so there is no hand-built black layer. The cost is that those class names exist only while the plugin is installed.
Pick by Tailwind version and license first, looks second. A free block written for v4 beats a prettier one written for v2.
Performance and accessibility checks for a Tailwind hero
A hero passes on speed when Largest Contentful Paint lands at 2.5 seconds or less at the 75th percentile (web.dev). On contrast, its text needs a 4.5:1 ratio, or 3:1 for large text, against the background (W3C, WCAG 2.2).
HTTP Archive’s 2024 Web Almanac found that 9% of mobile pages start their LCP from a CSS background image, which the browser discovers only after the stylesheet is processed.
A bg-cover hero has the same exposure. The web.dev fix is a preload with fetchpriority="high", or a plain img in the markup.
Lazy loading is a separate trap. The 2025 Web Almanac counts about 16% of mobile pages lazy-loading their LCP image, 10.4% natively and 5.9% through custom code. The 2024 edition had 9.5% and 6.7%. Third-party write-ups that quote about 10% match the native figure only.
Priority makes a visible difference. In web.dev’s test of the Google Flights page, fetchpriority="high" on the hero image cut LCP from 2.6s to 1.9s.
<img src="/img/hero.webp" alt="Dashboard preview" width="1200" height="600" fetchpriority="high" class="w-full h-auto">
Explicit width and height reserve the space. The 2025 Almanac calls missing image dimensions one of the most persistent and preventable causes of layout shift, with 62% of mobile pages leaving at least one image unsized. Leave loading="lazy" off this image.
web.dev lists elements that cover the full viewport among those Chromium excludes as background, so a true full-screen hero image can drop out of LCP candidacy.
Check which element Lighthouse or DevTools reports before tuning an asset. For a video background, the poster image or first frame counts, whichever is earlier.
On the accessibility side, the hero’s risk is text over imagery. A bg-black/50 layer is a color contrast fix, not decoration.
W3C’s guidance counts large-scale text as 18 point, or 14 point bold, and says to compare unrounded values, so 4.499:1 fails. Test against the lightest part of the photo behind the words, not the average.
The rest of web accessibility for a hero is short.
An informative img needs descriptive alt text, while decoration gets alt="". A CSS background has no alt at all. Buttons should carry focus-visible:outline-2 focus-visible:outline-offset-2, and an autoplaying video should get motion-reduce:hidden with a static image behind it.
When a copy-pasted Tailwind hero breaks or does not fit
A pasted hero breaks when it targets a different Tailwind version, needs a browser v4 excludes, leans on JavaScript or a plugin you did not install, or ships under a license that forbids your use.
Version is the most common culprit. A Creative Tim roundup of nine free hero sections, first published on Tailwind Components, lists versions from 1.3.4 to 3.0.18, none of them v4. Their v3-era gradient classes should get the renames from the upgrade guide, and any bg-opacity-* overlay needs the slash syntax.
Dark mode setup trips people too. A block built around darkMode: 'class' in tailwind.config.js needs the @custom-variant override in v4. Without it, dark: follows the operating system.
Heroes with a navbar or menu often need extra scripts, and HyperUI says some of its interactive components include vanilla JavaScript. Tailwind Plus code, meanwhile, was licensed with a ban on sites or templates resold to multiple clients.
The browser floor is the limit people forget. Tailwind v4 targets Safari 16.4+, Chrome 111+ and Firefox 128+, and projects that need older browsers stay on v3.4 (Tailwind upgrade guide).
If a client still has visitors on older browsers, cross-browser compatibility testing comes before the first paste.
The quickest check for the rest is a build. Drop the block into a v4 project, and any element that renders unstyled usually carries a removed or renamed class.
Tailwind Hero FAQ
Is a Tailwind hero the same thing as HeroUI, Heroicons or Hero Patterns?
No. Those are separate products with similar names: HeroUI is a component library, Heroicons is an icon set, and Hero Patterns is a collection of SVG background patterns.
A Tailwind hero is the page section itself, and any of the three can decorate it.
Can a Tailwind hero be used in React or Next.js?
Yes. Paste the markup into a component and change class to className.
Keep the hero image eager-loaded, because image components in some frameworks lazy-load by default. Setup steps for using Tailwind CSS in React cover the install.
How do you animate a Tailwind hero without JavaScript?
Combine the transition and animate-* utilities, or define custom keyframes in an @theme block.
Animate the supporting lines and buttons, not the LCP element (usually the hero image or headline), because Shopify’s performance docs warn that fade-in effects on the LCP element can delay LCP by several seconds. Add motion-reduce:animate-none for visitors who want less motion.
How do you put a navbar on top of a hero image?
Make the hero relative and pin the navbar to its top edge with absolute inset-x-0 top-0 z-10.
Then add top padding to the hero content so the headline clears the bar, and check link contrast against the photo. A Tailwind navbar guide covers the menu markup itself.
How do you make gradient text in a Tailwind hero?
Apply a gradient, clip it to the text, and make the text transparent with bg-linear-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent.
Put it on a span around the key words inside the h1, so the rest of the headline stays plain. Check contrast at both ends of the gradient.
The Fastest Safe Path to a Shipped Tailwind Hero
The fastest safe path to a shipped Tailwind hero starts with the Tailwind version and the license. Image loading and priority come next, then overlay contrast, then breakpoints and dark mode.
A version mismatch can drop classes silently, so every later check would test the wrong output. Image loading comes second because a layout built around a CSS background costs more to change once the design is approved.
Contrast comes last among the checks because it depends on the final photo and overlay.
The trade-off is a slower first preview, since checks come before visual polish.
This sequence was verified against the Tailwind CSS v4.3 documentation on October 29, 2026. A new major release that changes class names or browser support reopens the first step.