Question 42553 in Html Question posted in
Some basic documentation can be found here.

Can I override the root font size for the CSS rem units for subcomponents? – Html

I use the components of a design system (Semantic UI React). Everything is measured with rem and the font-size for the html tag (the root) is 14 px.

Now I want to introduce a new design system (Tailwind UI). Which also uses rem everywhere and is based on a root font-size of 16px. So when I insert new components, they are too small.

So: Is there a way to have a separate root font size for certain areas?

Tags:

2

Answers


  1. 0

    You may use :

    html { font-size : px;}

    If you want different root values you may edit them in the pages you want editing the CSS of every page to have a custom root font-size in the html tag, hope it works 😀 gl

    Login or Signup to reply.
  2. 0

    Root font size is inherently global, you’d need to override it on a case-by-case basis once changing your root size.

    <style>
  html { font-size: 16px; }
  .override { font-size: 14px; }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search