Increase display font size in react quill

Question

I want to increase the inner text size of react quill text box, not the output text size but text editor's font size Image of form in the image, you can see the different font sizes. It looks odd This is code

"use client"

import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const TextEditor = ({ value, onChange  }) => {
  const toolbarOptions = [
    ['bold', 'italic', 'underline'],     
    ['blockquote', 'code-block'],            
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'header': [ 2, 3, false] }],
    [{ 'script': 'sub' }, { 'script': 'super' }],     
    [{ 'align': [] }],

    ['clean']                                        
  ];

  return (
    <ReactQuill
    style={{ fontSize: '20px' }}
       theme="snow"
      value={value}
      onChange={onChange}
      modules={{
        toolbar: toolbarOptions
      }}
      className="border-0 px-3 py-2 placeholder-gray-400 text-black bg-white rounded shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
    />
  );
};

export default TextEditor;

here I tried text-base text-lg but nothing changed

Answer 1

Add this line in your toolbarOptions [{ size: ["small", false, "large", "huge"] }]