Lexical error on line 1: Unrecognized text. in v4

[simonmaass]

What version of Tailwind CSS are you using?

For example: v4.0.0-alpha.30

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

"@tailwindcss/[email protected]"
"@tailwindcss/[email protected]"
"@tailwindcss/[email protected]"

What version of Node.js are you using?

v20.11.1

What browser are you using?

Chrome

What operating system are you using?

Windows

Describe your issue

WARN [vite:css] Lexical error on line 1: Unrecognized text. 17:04:20

Erroneous area:
1: infinity * 1px
^..^
1117| }
1118| .rounded-full {
1119| border-radius: calc(infinity * 1px);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1120| }
1121| .rounded-lg { (x2)

[philipp-spiess]

Hey there! I'm as surprised as you to see this as being marked as unrecognized because it does work in browsers 😅

Do you have some info on how to reproduce this? I've tried to run it inside a Vite playground (using the @tailwindcss/vite package) with both postcss and lightningcss as the configured preprocessor and I never saw this warning (neither in dev mode nor in production).

Would be cool if we can track down where the parsing goes wrong and send a fix upstream.

[simonmaass]

This is my setup:

• [email protected]
• [email protected]
• @tailwindcss/[email protected]
• @nuxt/[email protected]

[benfeather]

I'm also seeing this error in a nuxt 3 project. My versions are:

nuxt: 3.14.1592,
tailwindcss: 4.0.0-beta.7
@tailwindcss/vite: 4.0.0-beta.7
vite: 5.4.11

[simonmaass]

@benfeather are u using nuxt/ui v3?

[benfeather]

@simonmaass No, i'm not using any UI library.

[ckvv]

I think it was a problem with the vite css processor, the problem was solved when I switched from postcss to lightningcss