message: docs: add note about root font size
diff: @@ -223,8 +223,8 @@ Tailwind CSS. The values are proportional, so 1 spacing unit is equal to
  > **Mental model:** If you need a spacing of `40px`, divide it by `4`. That'll
  > give you `10`. Then use it in your component.
  -| Name | Space | Pixels | |
  -| ---- | ------- | ------ | --------------------------------- |
  +| Name | Space (in `rem`) | Pixels | |
  +| ---- | ---------------- | ------ | --------------------------------- |
  | 0 | 0 | 0px | <Box bg="pink.200" h="4" w="0"/> |
  | px | 1px | 1px | <Box bg="pink.200" h="4" w="px"/> |
  | 1 | 0.25rem | 4px | <Box bg="pink.200" h="4" w="1"/> |
  @@ -245,6 +245,14 @@ Tailwind CSS. The values are proportional, so 1 spacing unit is equal to
  | 56 | 14rem | 224px | <Box bg="pink.200" h="4" w="56"/> |
  | 64 | 16rem | 256px | <Box bg="pink.200" h="4" w="64"/> |
  +**Note:** This is `rem` units are relative to the root or html font size which
  +is `16px` by default. Chakra leaves this value unaltered.
  +
  +Changing the root font size will make the `pixel` values above altered and
  +you'll need to calculate the corresponding pixel value yourself.
  +
  +The simple calcuation is `remValue * rootFontSize = pixelValue`
  +
  ## Sizes
  The `sizes` key allows you to customize the global sizeing of components you
  