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.

1 Reply

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.