JSFiddle - React, Tailwind, and code Playground

by mihai3636

HTML

<body>
  <p class="text">
    Hello world
  </p>
</body>

SCSS

@use "sass:math";

/// Converts PX to REM
/// @access public
/// @param {string} $size - Value to be converted in PX.
/// @returns {string} - Returns REM string.
/// @example font-size: rem(24px);
/// @returns font-size: 1.5rem;
@function toRem($size) {
  $remSize: math.div($size, 16px);
  @return #{$remSize}rem;
}

:root {
  --fs-normal: #{toRem(32px)};
}

.text {
  font-size: var(--fs-normal);
}