Skip to content

How to resolve node_modules path for Tailwind 4.0 @source #3440

@endigo9740

Description

@endigo9740

I've outlined our use case here:

tailwindlabs/tailwindcss#18418 (comment)

And here's an example Stackblitz instance:

https://stackblitz.com/github/skeletonlabs/skeleton-repl-sveltekit?file=src%2Fapp.css

The Issue

To provide further context, Tailwind 4 uses heuristics to identify locations within the local app that utilize Tailwind classes, to ensure these classes are inserted into your CSS bundle. However, there are times when you need to specify your a specific path for this to search - like elements styled using Tailwind that are part of a NPM package, such as a component library.

For this Tailwind provides the @source function to point to the source code paths for this.
https://tailwindcss.com/docs/functions-and-directives#source-directive

The issue is in Stackblitz, your node_modules location is obscured. It's not part of the normal file tree within application source:

Image

This means using a source path like this will not resolve properly:

@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';

What's Needed

We need to know where to point to resolve the location of the node_modules and contained packages as shown above. My assumption is this would be further up the tree, but not sure where exactly. I've tried prepending a number of additional ../, but with no luck.

Thanks for any help!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions