Call to action button has extra borders (Marketing: Landing Page Examples)

[kendalled]

What component (if applicable)

• URL for category: https://tailwindui.com/components/marketing/page-examples/landing-pages
• Component name: Background image hero with alternating features

Describe the bug
The call to action button in the top right (gradient of indigo shades, says 'Sign up') has extra borders on the left and right. The left is a blueish color while the right has an indigo shade. Neither match the button and it appears to be a visual bug.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Landing Page Examples'
2. Click on 'Background image hero with alternating features'
3. See button with extra borders

Expected behavior
The gradient to clip to the edge of the button on both sides.

Screenshots

Browser/Device (if applicable)

• OS: Any
• Browser: Any
• Version: Latest

Additional context
Hope this helps!

[davidluhr]

@kendalled Great catch! Turns out this is how transparent borders appear on top of gradient backgrounds in CSS (even outside of Tailwind CSS).

Hmm…we'll have to think of a different way to style gradient buttons to have consistent box sizing with other buttons. I'll keep you updated on what we do! Thanks for reporting this.

[kendalled]

@davidluhr Thanks! Let me know if you figure out / push a solution. Love the work you guys have done so far. Also, I noticed your youtube video "Customizing your design system" is actually titled "Customizing you design system". Have a great week and go Tailwind!

[davidluhr]

@kendalled Thanks for letting us know about the YouTube video title. Looks like it was fixed recently.

[kendalled]

Is this being worked on still?

[davidluhr]

@kendalled Sorry for the delayed response. It took a while to find a fix, but the solution is to use background-origin: border-box; so that the background image gradient spans across the entire button, including the transparent border.

I've actually added dedicated bg-origin utilities to Tailwind CSS so we can solve this issue directly in Tailwind UI: tailwindlabs/tailwindcss#4117

Currently, we are waiting for a few new features to be ready in Tailwind CSS so we can do a minor version release, at which point we will be able to incorporate this fix using the new utility classes.

As a short-term workaround, you could manually add this class to your project:

.bg-origin-border {
  background-origin: border-box;
}

Thanks again for reporting this; it helped us improve both Tailwind CSS and Tailwind UI! I'll let you know once the final fix is live.

[davidluhr]

@kendalled Thanks again for all your patience with this issue!

With the release of Tailwind CSS v2.2, we now are able to use the bg-origin-border utility, which solves this visual issue.

The corrected version should be live on the site shortly!