Why only support mt-1.5 and but not mt-1.2, mt-1.6 etc

[anhdd-kuro]

I see that v4 supports mt-1.5 but not the other. Why is that? Are there any problems?
If the generated css become

  .w-17 {
    width: calc(var(--spacing) * 17);
  }

  .w-1.5 {
    width: calc(var(--spacing) * 1.5);
  }

I can't see any problem with other numbers then. Or maybe this is a bug ?

function isMultipleOf(value: string | number, divisor: number) {
  let num = Number(value)
  return num >= 0 && num % divisor === 0 && String(num) === String(value)
}

[wongjn]

What "other" are you referring to? I believe the bare values support increments of 0.25.

[anhdd-kuro]

I means 1.1、1.2、1.3

[adamwathan]

Supporting .mt-1.6 feels a bit odd to me because that would end up being 6.4px. We've limited it to steps of 0.25 so things land on whole pixels. Can always use arbitrary values when you want to do something that's outside of the regular scale though, like mt-[0.4rem] (equivalent of 1.6).

[anhdd-kuro]

That's true if you're working with a 4px or 2px code base.
But what if I want to achieve something like this?

html {
   font-size: 67.5%;
}

@layer theme {
  :root {
    --spacing: 1rem;
  }
}

mt-8 // 8rem ~ 80px 
mt-1.6 // 1.6rem ~ 160px 
mt-1.7 // 1.7rem ~ 170px 
mt-12 // 12rem ~ 120px 

instead of using mt-[1.7rem].
Of course, I could do something like this:

html {
   font-size: 67.5%;
}

@layer theme {
  :root {
    --spacing: 0.1rem;
  }
}

mt-8 // 0.8rem ~ 8px 
mt-16 // 1.6rem ~ 16px 
mt-17 // 1.7rem ~ 17px 
mt-12 // 1.2rem ~ 12px 

However, the documentation only mentions m-<number>, which can lead to misunderstandings. You can keep the limits that your team thinks are appropriate, but it would be helpful to note this in the documentation.

That said, I still believe it would be nicer to support all values ( maybe limit numbers up to two decimal places.)
Then I (or we) can easily convert the codebase of some pixel-perfect projects that use mt-[1.6rem] ( by regex ) to match Tailwind 4 and achieve significantly shorter class by saving characters used for arbitrary values []

[rozsazoltan]

Additionally, its usage is inconsistent. Nothing in the documentation suggests that decimal numbers shouldn't be used. Since .5 works, I wouldn't consider supporting other decimal values to be a big leap.

[ixkaito]

@adamwathan First of all, thank you for creating such a wonderful tool. I'm a heavy user of Tailwind CSS. Like @anhdd-kuro, I would also like to see support for values that aren't divisible by 0.25.

@theme {
  --spacing: 0.0625rem; /* 1px */
}

@utility text-* {
  font-size: calc(--value(number) * var(--spacing));
  line-height: calc(--modifier(number) * var(--spacing));
  line-height: --modifier([length], [*]);
}

I have set up font size utilities like this, and I need to use utilities like text-14.4/24 or text-25.6/40. I know I can use arbitrary values like text-[0.9rem]/24 or text-[1.6rem]/40, but I don't want to convert px to rem every time. That's why I set --spacing: 0.0625rem; so I don't have to do these calculations. Another workaround is to use --spacing() like text-[--spacing(14.4)]/24 or text-[--spacing(25.6)]/40, but this is not smart. And I think it's not uncommon to have font sizes with decimal points in pixels.

I think it's fine that the default settings are in 0.25 increments, but at lease it would be nice to have an option for users to disable this. From what I can see in the source code, it doesn't seem possible to make a simple plugin to change this either.