Text size not changing for h1 and h2 elements in Tiptap editor

Question

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.

<div className="w-4/5 mx-auto h-100 border-4 rounded-3xl">
                    <div className="rounded-3xl m-5">
                        <h1 className="text-center font-extrabold text-3xl">
                            Create Blog
                        </h1>
                        <form className="space-y-4 md:space-y-6 w-4/5 mx-auto h-100" action="#" >
                            
                            <div>
                                
                                <Tiptap content={content} 
                                onChange = {(newcontent:string) => handleChange1(newcontent)}/>
                            </div>
                        </form>
                    </div>
                </div>
                
                

Tiptap Configurtion

const Tiptap = ({ content, onChange }: any) => {

    const handleChange1 = (newContent: string) => {
        onChange(newContent)
    }
    const editor = useEditor({
        extensions: [
            Document,
            Paragraph,
            Text,
            Heading.configure({
                levels: [1, 2],
            }),
            CodeBlockLowlight.configure({
                lowlight,
            }),
            StarterKit.configure({
                bulletList: {
                    HTMLAttributes: {
                        class: "bullet_class",
                    },
                },
                orderedList: {
                    HTMLAttributes: {
                        class: "order_class",
                    },
                },
                heading: {
                    HTMLAttributes: {
                        class: ``,
                    },
                },
            }),
            Image,
            BulletList.configure({
                HTMLAttributes: {
                    class: 'list-disc pl-13'
                }
            }),
            ListItem,
            Underline,
            Link.configure({
                openOnClick: false,
                autolink: true,
            }),
            OrderedList.configure({
                HTMLAttributes: {
                    class: 'list-decimal pl-13'
                }
            })
        ],
        editorProps: {
            attributes: {
                class:
                    "flex flex-col px-6 py-3 justify-start border-b border-r text-black border-l border-gray-700  items-start w-full gap-3 pt-4 rounded-bl-md rounded-br-md outline-none"
            }
        },
        onUpdate: ({ editor }) => {
            handleChange1(editor.getHTML());
        },
    })

    return (
        <>
            <div className='w-full px-4'>
                <Toolbar editor={editor} content={content}></Toolbar>
                <EditorContent style={{ whiteSpace: "pre-line" }} editor={editor} />
            </div>

        </>

    )
}


//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"
                        }

                    >
                        <Heading1 className="w-5 h-5" />
                    </button>
                    <button
                        onClick={(e: any) => {
                            e.preventDefault()
                            editor.chain().focus().toggleHeading({ level: 2 }).run()
                        }}
                        className={
                            editor.isActive("heading", { level: 2 })
                                ? "bg-slate-500 text-white p-2 rounded-lg"
                                : "text-bold"
                        }

                    >
                        <Heading2 className="w-5 h-5" />
                    </button>

Not only for h1 and h2, even block quotes are working the codeblock doesn't highlighting any color, just display as plain text viewed official documentation of tiptap, but documentation didn't resolved this error, what factor would resisting this behaviour?