nativescript 에서 height 옵션은 어떤 값일까? style class 로 적용이 가능한지에 대해서

Updated on 

 <GridLayout columns="auto, auto, *, auto" class="px-2 space-x-2.5"
 height="40">

이런 레이아웃이 있다고 치자. 그런데 height=“40” 이 있다.

근데, 이렇게 입력하는 것 보다는 class에 tailwindcss 로 height 를 설정하고 싶을 때가 있다.

하지만, 도대체 height=“40”이 무엇을 의미하는지 알 수가 없었다. rem? em? px? 도대체 뭐인지 궁금할텐데,

여기서 설정되는 값은 정확히 DIP 라고 한다.

그래서 https://github.com/NativeScript/tailwind/blob/main/src/removeUnsupported.js#L127 이 링크를 보면 알 수 있듯이.

      // Convert em/rem values to device pixel values
      // assuming 16 as the basis for rem and
      // treating em as rem
      if (decl.value.includes("rem") || decl.value.includes("em")) {
        decl.value = decl.value.replace(remRE, (match, offset, value) => {
          const converted = "" + parseFloat(match) * 16;

          options.debug &&
            console.log("replacing r?em value", {
              match,
              offset,
              value,
              converted,
            });

          return converted;
        });
        options.debug &&
          console.log({
            final: decl.value,
          });
      }

rem 와 em 을 DIP 계산식에 맞게 수정하고 있음을 알 수 있다.

지금은 nativescript 에 대한 이해도가 낮기 때문에 height 를 입력하겠지만, 나중에는 h-12, h-40 같은 tailwindcss style class 로 사용할 것이다.

다른 글