fix(core,react): fix font size variable issue for tailwind users

[NaveenChand755]

Summary

Fixed text-heading, text-body, text-paragraph, and other semantic font-size utility classes not being generated for apps that import @auth0/universal-components-react/tailwind and run their own Tailwind v4 build.

Why

• dist/tailwind.css (the entry for Tailwind-only consumers) shipped with only a @source scan directive — no font-size variables or utility classes at all.
• The natural fix — @import-ing core's font-sizes.css into tailwind.css — doesn't work: when @tailwindcss/cli compiles a file with a real @import but no @import "tailwindcss" in scope, it silently strips @utility/@theme/@source rules, leaving only plain :root variables in the output.
• To work around this, packages/react/scripts/build-tailwind-css.mjs reads font-sizes.css's raw text and prepends it into tailwind.css before invoking the CLI — so it compiles as if hand-pasted rather than imported, and the utility classes survive.
• dist/styles.css (the self-contained bundle for non-Tailwind consumers) was never affected — its build pipeline already has @import "tailwindcss" in scope, so the @import resolves normally there

What

• packages/core/src/styles/font-sizes.css — added @Utility blocks for text-page-header, text-page-description, text-heading, text-title, text-subtitle, text-body, text-paragraph, text-label, mapped to the existing --font-size-* variables.
• packages/react/scripts/build-tailwind-css.mjs (new) — prepends font-sizes.css's raw content into tailwind.css before running @tailwindcss/cli + postcss, so the utility classes survive into dist/tailwind.css (a plain @import gets silently stripped by the CLI).
• packages/react/package.json — build:tailwind now runs node scripts/build-tailwind-css.mjs instead of an inline shell command.
• organization-member-detail.tsx — swapped text-2xl for text-heading on the member name heading, for consistency with other semantic font classes.
• Net effect: Tailwind-only consumers importing @auth0/universal-components-react/tailwind now get working text-heading, text-body, etc. classes (previously none shipped). dist/styles.css was already working and is unaffected.

Packages

• packages/core
• packages/react
• examples

References

Testing

How can this be verified? Note anything intentionally not covered by tests and why.

• This change adds unit test coverage
• Tested for both SPA and RWA flows, all example apps working
• All existing and new tests complete without errors

Checklist

• Breaking change
• Requires docs update
• Backward compatible

Contributing

• I have read the Auth0 general contribution guidelines
• I have read the Auth0 Code of Conduct

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1b9e8eea-c2ab-40e8-805a-dc617a823cc7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/font-size-tailwind-utility

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}