Why don’t Tailwind fractional spacing classes like mr-1.5 apply in my project, while mr-1 and mr-2 work?

I’m using Tailwind CSS with my project (Puppeteer for PDF export, but this also happens in plain HTML rendering).

I noticed that spacing utilities with fractional values such as mr-1.5, ml-2.5, etc. don’t have any effect. At the same time, integer classes like mr-1 or mr-2 work as expected.

Example:

<div class="flex">
  <span class="mr-1">mr-1 works</span>
  <span class="mr-1.5">mr-1.5 does not work</span>
  <span class="mr-2">mr-2 works</span>
</div>

What I expect:

The middle should have a 6px right margin (Tailwind docs say mr-1.5 = 0.375rem = 6px).

What I see:

It has no extra spacing at all, as if the class doesn’t exist.

Why are the fractional classes breaking the process, and what can I do to get to the desired results?

I tried using different classes, but it didn't work. I tried using mr-[0.375rem] and mr-[1.5] as well, neither of them worked, probably because they also contain a fractional number.

Update: the issue was related to how I injected the CSS generated by Tailwind. For further details, see my own answer down below.

Solution

So it turns out the problem was the way I put the CSS into the HTML file. Tailwind generated the whole CSS into a string:

export const styles = `@charset "UTF-8"; ...`

This contained escape characters, so a class with a fractional number looked like this:

.mr-1\.5 {
  margin-right: 0.375rem;
}

Which I then put into the HTML, like this:

 <html>
    <head>
      <meta charSet='utf-8' />
      <style dangerouslySetInnerHTML={{ __html: styles }} />
      <style>
...

And the escapes being in a backtick string broke the whole process.

The solution was to prefix every '\' character with another '\'. This made it possible for the final CSS to contain exactly one \ character, making the whole CSS with fractions working properly.