space-x-3/4 not being generated in JIT (1 and 2 are)

[TheDutchCoder]

What version of Tailwind CSS are you using?

2.1.1

What version of Node.js are you using?

v14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Mandatory Slayer song

https://www.youtube.com/watch?v=TU0RIt2TeSg&ab_channel=TheHeavyMetalHD

With a flex layout, the following classes work:
space-x-1
space-x-2
space-x-7
space-x-8

The following don't:
space-x-3
space-x-4
space-x-5
space-x-6
space-x-10
etc.

This is our spacing config:

    spacing: {
      px: '1px',
      0: '0px',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      11: '2.75rem',
      12: '3rem',
      14: '3.5rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      28: '7rem',
      32: '8rem',
      36: '9rem',
      40: '10rem',
      44: '11rem',
      48: '12rem',
      52: '13rem',
      56: '14rem',
      60: '15rem',
      64: '16rem',
      72: '18rem',
      80: '20rem',
      96: '24rem',
    },

[TheDutchCoder]

To extend on this: the same happens for grid-cols, so I think something's up with generating the spacing-based classes.
Let me know if I can be of more assistance (like a quick screen share session).

Non-JIT mode works fine btw.

[adamwathan]

You nailed it with the song choice 😅🤘but unfortunately I think a reproduction is needed in this case as I can't reproduce.

Here's what I see when I run a build with JIT against a simple HTML file just using space-x-3:

[TheDutchCoder]

Yeah we have a non OSS monorepo so that'll be hard, but I'm more than willing to do a screenshare at some time maybe?
It's a bit of a unique setup and maybe some other tool is interfering (like Storybook).

I'll also dig a bit deeper when I have some time and see if I can isolate it a bit better.

[adamwathan]

Yeah hard to schedule a screenshare right now because I'm just kinda at my computer intermittently while taking care of a newborn. If you can create a minimum reproduction that will help.

[TheDutchCoder]

Sure thing man, I'll see if I can dig into this a bit more and find what causes it.

[nathanjessen]

.flex not generated as well

[adamwathan]

@nathanjessen Please open an issue with a reproduction, it works for us (tailwindcss.com is using JIT and it uses flex about 5000 times hah)

[nathanjessen]

@adamwathan fair enough haha. I did a clean react setup and it works so it must be some issue with my app. I'll add a comment if I discover the root cause.

[nathanjessen]

I've opened an issue for my bug, #4027 . It sure was fun to track that one down 🤷🏻‍♂️

[TheDutchCoder]

I'm not 100% sure yet, but it looks like classes are getting "purged" by default with JIT (maybe "not all classes get generated" is the better wording).

We had some mdx files that used classes not used elsewhere and when I add those to purgeCSS it works with the old engine, so I'll give this another shot and report back.

[adamwathan]

@TheDutchCoder Yeah you definitely need to add all source files that could contain classes to your purge config, including MDX files. 99% chance that's the issue here, so going to close, but feel free to re-open with a reproduction if not.

[TheDutchCoder]

I'm fairly sure that's the issue, sorry for the bother!