@source directive should support dynamic path resolution or environment variables

[dm-heinze]

Problem

The @source directive in Tailwind CSS v4 requires static, absolute paths, which creates portability issues in projects that use dynamically generated dependencies (like Nuxt
layers from GitHub).

Use Case

We're using a Nuxt project that extends from a GitHub layer:
extends: [
['github:my-nuxt-layer', { auth: process.env.GITHUB_TOKEN, install: true }]
]

This creates a directory structure like:
node_modules/.c12/github_my_nuxt_layer_RANDOM_HASH/app/

The hash changes when the layer is re-downloaded, making static @source paths impossible.

Current Workaround

@source '/absolute/path/to/node_modules/.c12/github_my_nuxt_layer_ABC123/app/';

This breaks portability across machines and deployments.

Proposed Solutions

1. Environment Variable Support:
   @source env(NUXTWARE_LAYER_PATH);

2. Dynamic Resolution Functions:
   @source resolve('node_modules/.c12/github_hubblecommerce_nuxtware_*/app/');

3. Build-time Alias Support:
   Allow build tools to register aliases that @source can resolve.

Impact

This affects any project using:

• Nuxt layers from external sources
• Monorepos with dynamic paths
• CI/CD environments with varying directory structures

Would greatly improve developer experience for modern framework integrations. Any other ideas how to solve this are welcome :)

[ineshbose]

Hey, I think I'm trying to consider this discussion while working on the next version of @nuxtjs/tailwindcss, and you'll see that there's a sources.css generated in .nuxt/tailwindcss directory that could potentially solve this for you?