Hover effects as Tailwind utility classes
Effects rewritten as utility classes rather than a stylesheet, for a project that keeps everything in the markup.
- Tailwind v4
- Tailwind v3
- any framework
An effect, in Tailwind
This is the Gradient Shift Button effect, run through the converter when this page was built — not a sample of what the output is meant to look like. All 1,126 effects convert the same way, because every one of them is markup plus a stylesheet.
<button class="relative py-[0.75rem] px-[1.75rem] border-none rounded-[0.625rem] font-semibold text-[0.95rem] text-[#fff] cursor-pointer bg-transparent bg-[linear-gradient(120deg,#f43f5e,#f59e0b,#10b981,#6366f1)] [background-size:300%_300%] [background-position:0%_50%] [transition:background-position_0.6s_ease,transform_0.2s_ease,box-shadow_0.3s_ease] shadow-[0_6px_18px_-6px_rgba(244,63,94,0.5)] hover:[background-position:100%_50%] hover:[transform:translateY(-2px)] hover:shadow-[0_12px_28px_-8px_rgba(99,102,241,0.55)] active:[transform:translateY(0)]">Get Started</button>
What to know before you paste it
- Arbitrary values must appear as complete literal strings for Tailwind to detect them — do not build these class names by concatenation.
Blocks and pages
All 433 blocks and pages are React and Tailwind, and they ship as written — there is nothing to convert for Tailwind, because that is already what they are.
Getting it into your project
npx hoverlab add btn-gradientNo flag. The CLI reads your package.json and emits Tailwind because tailwindcss is a dependency. It also picks the folder — an existing components directory rather than a new top-level one.
In a monorepo where detection has nothing to go on, say it outright: npx hoverlab add btn-gradient --framework tailwind
- Paste the markup. The effect is in the class list rather than in a stylesheet, so there is nothing else to add.
- Arbitrary values have to appear as complete literal strings for Tailwind to detect them — do not build these class names by concatenation.
- Blocks and pages are already written in Tailwind, so at that rung this target is simply the source.
Where the licence comes into it
Tailwind output is Pro in the website’s export panel, and it is worth being exact about what that is. The conversion runs in your browser, and the public API and the CLI hand every format to any caller with no key and no account, on purpose. What Pro sells is the licence to ship it, not access to it.