Missing CSS viewport units in build

[danielluca]

What version of Tailwind CSS are you using?

For example: v4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

For example: astro 5.1.9, tailwindcss/vite 4.0.0

What version of Node.js are you using?

For example: v18.19.0

What browser are you using?

For example: Chrome, Safari, Firefox

What operating system are you using?

For example: macOS, iOS

Describe your issue

Utilities with viewport units like h-dvh or h-[90dvh] are missing in the build. Using them in development is no problem.

[wongjn]

Seems to be working for me in a super simple Astro project I spun up. Could you provide a project that reproduces the unexpected behavior please? It would be super helpful for us to debug.

[danielluca]

I am toggling styles via the script tag in a astro component. While using h-screen everything is working in development and in the static build. While using h-dvh it is only working in development but not in the static build.

The css class .h-dvh is completely missing in the build.

const mobileMenuButton = document.querySelector(
  "[data-mobile-menu-button]",
);

const mobileMenuButtonIcon = document.querySelector(
  "[data-mobile-menu-button-icon]",
);

const defaultStyles = "hidden h-full w-full flex-1 shrink-0 flex-col divide-y overflow-y-auto ring-0 lg:flex lg:w-max lg:flex-row lg:items-center lg:divide-y-0 lg:overflow-visible lg:pb-0";

// Toggling styles with h-dvh
const isOpen = "absolute left-0 top-0 mt-16 flex h-dvh border-t bg-white px-4 shadow-lg w-full flex-1 shrink-0 flex-col divide-y overflow-y-auto ring-0 lg:flex lg:w-max lg:flex-row lg:items-center lg:divide-y-0 lg:overflow-visible lg:pb-0";

mobileMenuButton?.addEventListener("click", () => {
  const navigationList = document.querySelector("[data-navigation-list]");

  mobileMenuButtonIcon?.classList.toggle("ph-list");
  mobileMenuButtonIcon?.classList.toggle("ph-x");

  if (navigationList) {
    navigationList.className = navigationList.className === isOpen ? defaultStyles : isOpen;
    return;
  }
});

[wongjn]

Could you provide a project that has that code that reproduces the unexpected behavior please?

[devcustrom]

Could you provide a project that has that code that reproduces the unexpected behavior please?

https://github.com/devcustrom/tailwindbug

[devcustrom]

Could you provide a project that has that code that reproduces the unexpected behavior please?

https://github.com/devcustrom/tailwindbug

В моём случае проблема была из-за

--spacing-4.5: 18px;
--spacing-5.5: 22px;

[devcustrom]

Could you provide a project that has that code that reproduces the unexpected behavior please?

https://github.com/devcustrom/tailwindbug

В моём случае проблема была из-за

--spacing-4.5: 18px;
--spacing-5.5: 22px;

If you use a backslash, then everything works.

--spacing-4\.5: 18px;
--spacing-5\.5: 22px;

[danielluca]

Could you provide a project that has that code that reproduces the unexpected behavior please?

Please take a look at https://github.com/danielluca/missing-dvh
As i mentioned, in developing everything is working but not in the build.

@wongjn

[devcustrom]

Could you provide a project that has that code that reproduces the unexpected behavior please?

Please take a look at https://github.com/danielluca/missing-dvh As i mentioned, in developing everything is working but not in the build.

@wongjn

If you use post css, the class is generated, so you can create a bug fix task in the vite plugin.

[wongjn]

It seems like none of the unique class names in the PageHeader.astro <script> are picked up in build 🤔

[jamesharding]

I wonder if this is at all related to #15794 where classes from components are somehow being missed?

[philipp-spiess]

Hey folks! Yeah we're currently investigating an issue with Astro builds and the Vite extension and I think this is a symptom of the same issue so going to close this one in favor of #15794