I’m working with Tailwind CSS version 3.4.16 and running into a tricky issue with my micro-frontend setup.
Here’s my sample markup:
<div class="pt-8">Welcome User</div>
The main issue is that REM units always reference the root document’s font size, even when my component lives inside a Shadow DOM with its own font sizing.
Current situation:
Main document font size: 24px (REM calculations use this)
My Shadow DOM font size: 16px (I need REM to use this instead)
This creates styling conflicts where my component doesn’t look right because the spacing is calculated from the wrong base font size. The obvious solution would be converting everything to pixel units, but that breaks responsive design and makes maintenance much harder.
My team lead suggested switching to EM units instead, but that would require extensive Tailwind configuration changes and updating class names throughout our entire codebase.
What I really want: A way to make Tailwind classes like pt-8 calculate REM values based on my Shadow DOM’s font size rather than the main document’s font size. Is there any configuration or workaround that can achieve this without a complete rewrite?
The problem lies in the nature of REM units, which always have their base size according to the document root and this cannot be altered within a Shadow DOM. A potential solution is to leverage a custom Tailwind configuration with CSS custom properties to manage scaling. You could define a CSS variable like --shadow-scale within your Shadow DOM to represent the ratio between the desired font size and the document’s root font size. Subsequently, adjust your Tailwind config to incorporate this variable into your REM calculations. For instance, instead of using padding-top: 2rem, you could use padding-top: calc(2rem * var(--shadow-scale)). This approach maintains the responsive nature of REM units while allowing for accurate scaling within the Shadow DOM without resorting to EM units or pixel values.
honestly, just create a separate tailwind build for ur shadow dom components. use a different config file with 16px base font size instead of fighting the rem inheritance mess.
interesting prob! have you tried using css custom properties to change the rem base in your shadow dom? redefining --tw-* vars locally could help. what if you set a different root font-size just for your shadow root?