Let's say we have a layout like this. But it has height="40". However, sometimes you'd like to set the height with Tailwind CSS in a class rather than entering
<GridLayout columns="auto, auto, *, auto" class="px-2 space-x-2.5"
height="40">Let's say we have a layout like this. But it has height="40".
However, sometimes you'd like to set the height with Tailwind CSS in a class rather than entering it this way.
But I couldn't figure out what exactly height="40" meant. Is it rem? em? px? You might be wondering what on earth it is,
The value set here is exactly DIP.
So https://github.com/NativeScript/tailwind/blob/main/src/removeUnsupported.js#L127 as you can see by looking at this link.
// 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,
});
}We can see that rem and em are converted according to the DIP calculation formula.
For now, because I have a limited understanding of NativeScript, I'll enter height, but later I'll use Tailwind CSS style classes like h-12 and h-40.