I'm using Tiptap for a rich text editor. I have h1 and h2 heading elements, but when I change the text to these headings, the font size doesn't visually change. Inspecting the element in the browser confirms the tag is correctly set to h1 or h2, but the size remains the same as regular text.
I've downloaded and configured all the necessary Tiptap extensions, but there's no apparent font size change for headings. While inspecting the element, it shows up as h1 or h2 as expected.
What I've tried:
Used h1 and h2 elements in Tiptap editor. Inspected the element in the browser to verify tag changes. Downloaded and configured all Tiptap extensions.
Which packages did you experience the bug in?
nextjs
What Tiptap version are you using?
2.2.4
What’s the bug you are facing?
I'm using Tiptap for a rich text editor. I have h1 and h2 heading elements, but when I change the text to these headings, the font size doesn't visually change. Inspecting the element in the browser confirms the tag is correctly set to h1 or h2, but the size remains the same as regular text.
I've downloaded and configured all the necessary Tiptap extensions, but there's no apparent font size change for headings. While inspecting the element, it shows up as h1 or h2 as expected.
What I've tried:
Used h1 and h2 elements in Tiptap editor. Inspected the element in the browser to verify tag changes. Downloaded and configured all Tiptap extensions.
What browser are you using?
Chrome
Code example
https://github.com/loki4514/Blog-App/tree/main/src/app/TipTap
What did you expect to happen?
`
Create Blog
`const Tiptap = ({ content, onChange }: any) => {
}
//tiptap svg button <button onClick={(e: any) => { e.preventDefault() editor.chain().focus().toggleHeading({ level: 1 }).run() }} className={ editor.isActive("heading", { level: 1 }) ? "bg-slate-500 text-white p-2 text-3xl rounded-lg" : "text-bold text-3xl" }
Anything to add? (optional)
No response
Did you update your dependencies?
Are you sponsoring us?
This is because you use Tailwind CSS, it removes some default browser styles
Check this link, its explained in their docs https://tailwindcss.com/docs/preflight#headings-are-unstyled
You can use the @tailwindcss/typography plugin to solve this