Tailwind styles are being overridden

Resolve issues with Tailwind v4 or other @layer-based CSS frameworks being overridden by CSS resets

Problem

Starting from version 4, Tailwind CSS uses @layer rules to define its styles.

Makeswift by default includes a CSS reset from normalize.css. Because the built-in CSS reset is unlayered, it’ll override the Tailwind styles, even if the Tailwind styles are more specific.

From MDN @layer documentation: “Styles that are not defined in a layer always override styles declared in named and anonymous layers.”

Solution

Disable the built-in CSS reset by setting enableCssReset={false} on the RootStyleRegistry. If you followed the installation docs, this would be located in your lib/makeswift/provider.tsx or src/makeswift/provider.tsx file:

1
<RootStyleRegistry enableCssReset={false}>
2
  {children}
3
</RootStyleRegistry>

Tailwind already ships with its own reset, so disabling the built-in reset prevents conflicts and preserves Tailwind’s styles.