TailwindCSS in a CSUI makes everything VERY small.
Trying to implement TailwindCSS in a project and can do it fine, but when in the shadow root, it's extremely tiny.
Is there an initial configuration that will set the base levels so that it doesn't appear really small?
2 Replies
Found the issue! There's mixed resources about implementing tailwind in the shadow root.
The issue: The HTML element is being set to 10px when usually it's 10px. It's hard to overwrite this. This is what makes your styles really small as originally, it's basing it off of the 16px (e.g
text-sm class is 0.875rem which means it's going to about 8px).
To fix this, I had to download a PostCSS plugin called rem-px transformer: https://github.com/TheDutchCoder/postcss-rem-to-px
This will convert all of your rem values to pixels manually. You can also set a baseSize as well.
Might not be the solution for everyone, as this presents other issues. But this is what worked for me.GitHub
GitHub - TheDutchCoder/postcss-rem-to-px: Converts rem values to pi...
Converts rem values to pixels with PostCSS. Contribute to TheDutchCoder/postcss-rem-to-px development by creating an account on GitHub.
hey @Lewis , I'm also running in to weird styling issues when running Tailwind in CSUI. Would be great if any of the Plasmo folks could weigh in here 🙂