html2pdf not working break page

[TuanKhang123]

My project uses ReactJS and html2pdf, Tailwind. I'm running into an issue when trying to control page breaks. So far, I’ve only been able to use the html2pdf__page-break tag. I customized it to use before instead of after, and it worked.

However, when I try using any other custom class names like break-avoid, break-after, or break-before, they don’t seem to work at all.

If anyone else has faced the same issue or knows what might be causing this (maybe a config problem?), I’d really appreciate your help. Thanks!

file.tsx

const convertToPdf = () => {
    const options = {
      html2canvas: {
        scale: 3,
        useCORS: true,
        allowTaint: false,
        logging: true,
      },
      jsPDF: {
        unit: 'mm',
        format: 'a4',
        orientation: 'portrait',
      },
      pagebreak: {
        mode: '',
        before: '.break-before',
        after: '.break-after',
        avoid: '.break-avoid'
      },
    };
    const content = printReviewRef.current;
    html2pdf().set(options).from(content).save();
  };

<div id='print-review' ref={printReviewRef} className='px-[45px] pb-5 '>
<div>test html2pdf break'</div>
<div>test html2pdf break'</div>
<div>test html2pdf break'</div>
<div>test html2pdf break'</div>
<div>test html2pdf break'</div>
<div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div className='bg-slate-400 break-before'>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
          <div>number 1</div>
        </div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
        <div>test html2pdf break'</div>
      </div>

styles.css
.html2pdf__page-break {
  height: 0;
  page-break-before: auto;
  break-before: auto;
}
.break-before {
  page-break-before: always;
  break-before: always;
}

.break-after {
  page-break-after: always;
  break-after: always;
}

.break-avoid {
  page-break-inside: avoid;
  break-inside: avoid;
}
`