Skip to content

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

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!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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