Edit Section Turns White and Invisible When Using ConnectAccountOnboarding with Tailwind CSS

[watagori]

Node Version

18.17.0

NPM Version

10.5.0

What OS are you seeing the problem on?

Mac

Stripe Version

1.19.4

Description

When using the ConnectAccountOnboarding component with Tailwind CSS, the Edit section becomes entirely white and the content is no longer visible. Removing all Tailwind settings, including those from the parent component, did not resolve the issue. The problem persists in this error state.

Steps to Reproduce

1. Implement ConnectAccountOnboarding component in a project with Tailwind CSS.
2. Navigate to the Edit section of the component.
3. Observe that the section turns white and content is not visible.

Expected Behavior

The Edit section should be visible and function correctly without any display issues.

Actual Behavior

The Edit section becomes completely white, making the content invisible, even after removing Tailwind CSS configurations.

Additional Information

This is the code.

<ConnectComponentsProvider
  connectInstance={stripeConnectInstance}
>
  <ConnectAccountOnboarding
    onExit={() => setOnboardingExited(true)}
  />
</ConnectComponentsProvider>

There is no Edit that should exist.

Could anyone provide insights or solutions to this issue?

[jorgea-stripe]

Hey @watagori , could you provide a small repository/code sample that repro's this issue? Perhaps you can use the https://docs.corp.stripe.com/connect/connect-embedded-components/quickstart code samples and add CSS on top of it. This would help us repro/diagnose the issue.