YPE-1320: scope Tailwind preflight CSS to SDK components only

[cameronapak]

https://lifechurch.atlassian.net/browse/YPE-1320

Problem

When consumers import our SDK (@youversion/platform-react-ui), Tailwind's preflight CSS resets are applied globally to the entire page. This causes the consumer app's styles to be overridden — for example:

• h1–h6 headings lose their font size and weight (font-size: inherit; font-weight: inherit)
• All elements get margin: 0; padding: 0; box-sizing: border-box forced on them
• Lists, images, links, and form elements are reset unexpectedly

This happens because @import 'tailwindcss/preflight.css' in global.css emits unscoped selectors like *, h1, h2, h3..., etc. that affect the entire DOM — not just our SDK components.

Solution

Replaced the global @import 'tailwindcss/preflight.css' with a scoped preflight that nests all reset rules under [data-yv-sdk]. Since all our SDK components already render a root element with data-yv-sdk, the preflight resets now only apply inside our components.

This means:

• ✅ SDK components still get the full Tailwind preflight reset they need
• ✅ Consumer app styles (h1 sizes, margins, list bullets, etc.) are no longer clobbered
• ✅ No changes needed in consumer apps or in our component code

Verification

• build:css compiles successfully
• Built output contains zero global * selectors — all preflight is scoped to [data-yv-sdk]
• All unit tests pass

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[changeset-bot]

🦋 Changeset detected

Latest commit: 32dba19

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-react-ui	Patch
@youversion/platform-core	Patch
@youversion/platform-react-hooks	Patch
nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[greptile-apps]

Greptile Overview

Greptile Summary

Replaced the global @import 'tailwindcss/preflight.css' with a manually scoped version wrapped in :where([data-yv-sdk]). This prevents Tailwind's CSS resets (margins, padding, heading sizes, list styles, etc.) from affecting consumer apps while preserving the resets within SDK components.

Key changes:

• Removed global preflight import that was resetting styles on all DOM elements
• Added 150 lines of scoped preflight CSS targeting only [data-yv-sdk] elements
• Used :where() pseudo-class to keep specificity at zero, allowing consumer styles to override when needed
• All SDK components already render with data-yv-sdk attribute, so no component changes required

Analysis:
The approach is sound. All public-facing SDK components (BibleReader, VerseOfTheDay, YouVersionAuthButton, BibleVersionPicker, BibleChapterPicker, BibleWidgetView, Verse) render root elements with data-yv-sdk. Primitive UI components (Button, Input, etc.) are always nested within these roots, so they inherit the scoped resets correctly.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The change is well-executed and addresses a critical CSS scoping issue. The manually scoped preflight CSS is a standard Tailwind pattern, all SDK components already use the data-yv-sdk attribute, and the :where() wrapper ensures zero specificity. The changeset follows unified versioning requirements by bumping all three packages. No logic changes, security risks, or breaking changes.
• No files require special attention

Important Files Changed

Filename	Overview
packages/ui/src/styles/global.css	Replaced global preflight import with manually scoped preflight CSS wrapped in :where([data-yv-sdk]) to prevent SDK styles from affecting consumer apps
.changeset/scope-preflight-css.md	Changeset properly bumps all three packages (ui, core, hooks) as patch versions per unified versioning requirement

_{Last reviewed commit: 7e248f6}

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[cameronapak]

@greptileai, update the description of this PR and then re-review

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[bmanquen]

I built it and checked the dist file but don't know how else I can verify this is working. I do find one * global selector in the distributed css file. This is also the case on main tho so not sure if I see a difference.

I might be missing something though.

See comment above.

[bmanquen]

I just saw that this is causing font family issues in the chapter and versions pickers.

[cameronapak]

This has been addressed and fixed @bmanquen !