Invalid CSS 'infinity * 1px' generated in full utilities [v4.0.15]

[najmudheenm]

Describe the bug

Tailwind CSS generates invalid CSS calc(infinity * 1px) for the w-full, h-full, min-w-full, and min-h-full utilities, causing a PostCSS lexical error.

Where it happened:

packages/tailwindcss/src/utilities.ts

To Reproduce

1. Create a Tailwind CSS project.
2. Use the w-full or h-full utility class in your HTML.
3. Run your build process.

Expected behavior

Tailwind CSS should generate valid CSS for the full utilities.

Actual behavior

Tailwind CSS generates calc(infinity * 1px), causing a PostCSS error:

version = v4.0.15

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[adamwathan]

Hey can you provide a reproduction? w-full for example is 100%:

https://play.tailwindcss.com/zFMUlyjBc2

The only place we use infinity in this way is for rounded-full which is calc(infinity * 1px), and that's totally valid CSS.

[babur001]

giving an error in react 16.8 v, node v 14

[philipp-spiess]

@babur001 Seems like you're on really outdated tooling here. It's unclear which package throws this issue but upstream tools have been changed to add support for that a while ago, see: #15936

@najmudheenm Friendly reminder to provide a reproduction. It might also be that you need to update some other tooling dependencies to get this working. This is definitely valid CSS though: https://caniuse.com/mdn-css_types_calc-keyword_infinity