undefined tailwind variables, css sourcemap warnings

[endquote]

Environment

------------------------------
- Operating System: Darwin
- Node Version:     v23.2.0
- Nuxt Version:     3.14.1592
- CLI Version:      3.17.1
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      default
- Runtime Modules:  @nuxt/[email protected]
- Build Modules:    -
------------------------------

Is this bug related to Nuxt or Vue?

Nuxt

Version

@nuxt/[email protected]

Reproduction

https://github.com/endquote/github-ugsebknu

Description

Tailwind in general is working fine for layout classes. However if I use a class like drop-shadow-lg it does not have an impact as it seems some variables are undefined.

Perhaps related, I'm seeing these warnings when building:

[vite:css] Lexical error on line 1: Unrecognized text.                                                                                                                                                                                                                                     4:12:25 PM

  Erroneous area:
1: infinity * 1px
^..^
945|    }
946|    .rounded-full {
947|      border-radius: calc(infinity * 1px);
   |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
948|    }
949|    .rounded-s { (x2)

ℹ ✓ 227 modules transformed.                                                                                                                                                                                                                                                                     4:12:26 PM
[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

In nuxt.config.ts I have this:
css: ["~/assets/css/main.css"]

In main.css I have this:

@import "tailwindcss";
@import "@nuxt/ui";

Additional context

I'm new to vue/nuxt/tailwind so it's entirely possible I'm doing something wrong.

Logs

[benjamincanac]

The warning is due to Vite, this has been reported to the Tailwind CSS team already.

However, the generated drop-shadow-lg class seems fine to me. This how Tailwind CSS handles it, check out: https://play.tailwindcss.com/ULRM1tgeWf. If you add the sepia class for example, you'll see the --tw-sepia css variable filled.

[endquote]

Thanks for the reply, I think I understand better. The default shadow was so light that I just couldn't even discern it by default.

[vighnesh153]

The warning is due to Vite, this has been reported to the Tailwind CSS team already.

Could you please provide a link to the ticket here? It would be very helpful for tracking purposes. Thank you.

[benjamincanac]

@vighnesh153 There are multiple issues/dicussions:

• [V4] Warnings during Nuxt & Vite build tailwindlabs/tailwindcss#15839
• [v4] Tailwind utilities layer absent in production build when vite.build.minify is used tailwindlabs/tailwindcss#15278
• Lexical error on line 1: Unrecognized text. in v4 tailwindlabs/tailwindcss#14994
• Warnings during Nuxt build tailwindlabs/tailwindcss#15836
• ...

It seems the lexical error warning has already been fixed upstream by [email protected].