Revision history [back]

To adjust the size (both height and width) of the displayed PDF in react-pdf library using Tailwind, you can set the CSS value for the width and height properties of the Document component. For example, if you want to set the PDF size to be 50% of the screen width and height, you can do the following:

import React from 'react';
import { Document, Page } from 'react-pdf';
import 'tailwindcss/tailwind.css';

export default function MyApp() {
  return (
    <div className="w-screen h-screen flex justify-center items-center">
      <Document file="example.pdf" className="w-1/2 h-1/2">
        <Page pageNumber={1} />
      </Document>
    </div>
  );
}

In the above code snippet, the w-1/2 and h-1/2 classes from Tailwind are applied to the Document component, which sets the width and height to 50% of its container. You can adjust these values to change the size of the PDF as per your requirements.