Next.js Discord

Discord Forum

Tailwind CSS 3 arbitrary value classes not loaded in production

Unanswered
Silver posted this in #help-forum
Open in Discord
SilverOP
Weird problem. An arbitrary values is something like:
<div class="w-[32rem]">
  <!-- ... -->
</div>


When I run locally with:
pnpm dev

or
pnpm build
pnpm start


The arbitrary values gets resolved correctly.

But when I run a Dockerfile to copy the built artifacts:
# Copy the necessary built artifacts
COPY --chown=nextjs:nodejs ./.next/standalone ./
COPY --chown=nextjs:nodejs ./.next/static ./.next/static

where: 
const nextConfig = {
  output: 'standalone',

It just does NOT work!

But the built in tailwindcss classes work without a problem.

And it is added to the safelist, but still, the same problem occurs.

So I'm wondering why? I can avoid custom one-off classes like these, but this is kinda bothering.

5 Replies

American black bear
I had similar problem to yours but I was using w-[calc(100vh-30px)] or something similar. It was working wonderfully with:
- tailwindcss v3 (dev & production)
- tailwindcss v4 (dev)

but was not for some reason working in production. What fixed my problem was removing the calc function so my code was the following:

className="w-[calc(100vh-30px)]" -> className="w-[100vh-30px]"


Maybe this helps you out.
Chum salmon
Did you write class instead of className?
SilverOP
I'm not sure if the problem originates from the custom class being dynamic, so adding it to safelist does not work.
But if it doesn't work, it shouldn't have worked with pnpm build; pnpm start;
Maybe some assets are not generated in the "standalone" mode?