Chrome extension, tailwind css and youtube issue

I am working on a Chrome extension that inserts some HTML into a shadow DOM. Everything works as expected, but on YouTube, the content seems zoomed out. I have also tried setting important: '#modal-root', on my tailwind.config.js, but that doesn’t solve the issue.

I also noticed that when I inspect the text in my extension HTML and look at the computed font size on youtube it shows 10px and on other websites it shows 20px.

I am using React for my Chrome extension with tailwind CSS.

This is how it should look like

And this is how it looks on youtube.com

Here is how I append the shadow dom:

import Modal from './src/components/Content/Modal.jsx';
import { createRoot } from 'react-dom/client';

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
    if (message.action === 'showInputPopup') {
        const elementName = 'my-extension';
        const wrapperContainer = document.querySelector(elementName);
        if (wrapperContainer) {
            wrapperContainer.remove();
        }
        const modalContainer = document.createElement(elementName);
        const shadowRoot = modalContainer.attachShadow({ mode: 'open' });

        // Load Tailwind CSS into Shadow DOM
        const styleLink = document.createElement('link');
        styleLink.setAttribute('rel', 'stylesheet');
        styleLink.setAttribute('href', chrome.runtime.getURL('assets/tailwind-generate.css')); // Update this path to your generated CSS file
        shadowRoot.appendChild(styleLink);

        // Create an inner div for React to render into
        const reactRootDiv = document.createElement('div');
        reactRootDiv.id = 'modal-root';
        shadowRoot.appendChild(reactRootDiv);
        document.body.appendChild(modalContainer);

        createRoot(reactRootDiv).render(<Modal />);
    }
});

And here is my tailwind.config.js

/** @type {import('tailwindcss').Config} */
import forms from "@tailwindcss/forms";

export default {
  important: '#modal-root',
  content: [
    'index.html',
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
      forms
  ],
}