NativeScriptのheightオプションはどのような値なのか？style classで適用できるかについて
このようなレイアウトがあるとする。 ただし、height="40" が設定されている。 でも、このように入力するよりも、classにTailwind CSSでheightを設定したいことがある。 しかし、height="40" がいったい何を意味するのか、さっぱり分からなかった。 rem？em？px？いったい何なのか気
GGAMI
<GridLayout columns="このようなレイアウトがあるとする。 ただし、height="40" が設定されている。 でも、このように入力するよりも、classにTailwind CSSでheightを設定したいことがある。 しかし、height="40" がいったい何を意味するのか、さっぱり分からなかった。 rem？em？px？いったい何なのか気
<GridLayout columns="このようなレイアウトがあるとする。 ただし、height="40" が設定されている。
でも、このように入力するよりも、classにTailwind CSSで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のようなTailwind CSSのstyle classを使うつもりだ。