Tailwind purges classnames from minified JS output

[deniaz]

Hey everyone!

We've run into a pretty strange issue with Tailwind's purging, where classes are purged while they shouldn't. Or rather, it's certain classes, like pr-1.5.

Lets say we have to following React component:

import { merge } from "@utilities/merge";
import React, { FC, PropsWithChildren } from "react";

type Props = {
    size?: "small" | "large";
};

export const Test: FC<PropsWithChildren<Props>> = ({ size = "small", children }) => {
    return <div className={merge([
        "tw-relative", 
        size === "small" ? "tw-pr-1.5" : "tw-pr-2",
        ])}>
        {children}
    </div>;
};

and also the following Tailwind config:

{
  presets: [...],
  prefix: 'tw-',
  content: [
    'src/components/Test/Test.tsx',
  ],
  ...
}

So far so good. Running npx tailwindcss -o test.css results in a bit of CSS and, as expected, the following declarations:

.tw-pr-1\.5 {
  padding-right: 0.375rem;
}

.tw-pr-2 {
  padding-right: 0.5rem;
}

.tw-pr-1 {
  padding-right: 0.25rem;
}

(although I'm a bit surprised about the .tw-pr-1 there).

Now, we're in the context of a component library and a consuming app. So there's a build process in place for the components. When built (with Vite) the resulting code looks like this.

You can clearly see that the two classes tw-pr-2 and tw-pr-1.5 are still present, and not dynamically concatenated. But when now changing the tailwind config to:

{
  presets: [...],
  prefix: 'tw-',
  content: [
    'dist/components/Test/Test.js',
  ],
  ...
}

and running npx tailwindcss -o test.css there are only two padding classes present:

.tw-pr-1 {
  padding-right: 0.25rem;
}

.tw-pr-2 {
  padding-right: 0.5rem;
}

.tw-pr-1.5 is missing. As a workaround we can use a record like this:

const styles = {
  small: 'tw-pr-1.5',
  large: 'tw-pr-2',
}

but I think either that's a bug in Tailwind's purging, or I'm missing something significant.

Sorry for the long text. 😅 I didn't know how to explain this any simpler.

Thanks for reading and—hopefully—replying!

Edit: I just discovered the same behaviour for .tw-pb-3.5 and .tw-pt-3.5. As soon as I extract the strings from a conditional statement and reference the values, it works. Also it seems to happen only with .5-values 🤔

[deniaz]

@SamuelAlev has found a solution to this and opened a Pull Request: #7481