Arbitrary values with commas don't work in production builds in Next.js

[wKovacs64]

Hey! First and foremost, thank you for Tailwind and all the content surrounding it. It's amazing and your work is greatly appreciated. And @tailwindcss/jit is just... wow. 😍

---

I took JIT for a spin and noticed at least one class family (grid-cols-) is not working in production builds, even though it works in development mode.

For example:

function Home() {
  return (
    <div className="px-96">
      <main className="grid grid-cols-[1fr,128px] gap-x-4 items-center p-8">
        <div className="bg-blue-400">Big column</div>
        <div className="bg-gray-400">Small column</div>
      </main>
    </div>
  )
}

export default Home;

Development:

.grid-cols-\[1fr\,128px\] {
    grid-template-columns: 1fr 128px;
}

Production:

(no rules applied for grid-cols-[1fr,128px] class)

Full reproduction with Next.js: https://github.com/wKovacs64/tw-jit-next/tree/issue-45

Any thoughts? Thanks!

[adamwathan]

Alright I can reproduce but I have no idea what's happening because it only happens in Next, and if I do the exact same thing with the same plugins outside of Next it works fine. Trying to reach out to maintainer of cssnano-preset-simple who works at Vercel to see if he can help!

[adamwathan]

Fixed in v0.1.2 🥳

[vunamhung]

I am afraid that you have not counted all the cases.
With prefix like this lg:grid-cols-[1fr,128px], it still bug.
I tested with version 0.0.13.
@adamwathan please review this case.
Thank you so much.