How to get "Heading" styles to apply to text

You may have encountered an issue with the visual editor where, despite applying a “Heading” style in the rich text editor, the style doesn’t apply to your text

Although the text looks bigger in the text editor, on the actual page it hasn’t changed at all. What gives?

A common reason for this is because of Tailwind. When you create a NextJS project, Tailwind is used by default, which overrides styling for all header components (see Preflight - Tailwind CSS)

There are two quick solutions: remove Tailwind preflight options or style your text using CSS. It is still recommended to use header tags where appropriate for accessibility reasons, as screen readers scan them to determine page structure.

It is also possible to create a custom heading component and register it from your codebase with Builder’s Visual Editor. See Intro to Integrating Custom Components - Builder.io