@source doesn't work if dist/ is in the gitignore.

[adambirds]

What version of Tailwind CSS are you using?

v4.0.7

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

NextJS 15.1.7

What version of Node.js are you using?

Node 23

What browser are you using?

Any browser

What operating system are you using?

MacOS (Linux with Docker)

Reproduction URL

https://github.com/adambirds/tailwind-issue-reproduction

The reproduction may not use those exact versions as was put together quickly, and my main app is dockerised.

Describe your issue

If dist/ is in your .gitignore file, it causes the @source directive to have issues when trying to tell tailwind to look for source files in a package in node_modules. Using my reproduction repo, you can edit globals.css to cause the issue to appear.

If set to the below it doesn't work even though it should.

@import 'tailwindcss';
@source '../../node_modules/tablewind';

If set to the below it does, but this isn't desired to have to append the /dist:

@import 'tailwindcss';
@source '../../node_modules/tablewind/dist';

The table in the repro app won't actually work as it requires a complex setup, but you can if the styling works as it will either look like this:

Working:

Not Working:

If you remove dist/ from the .gitignore it works, but it should be possible to have this in there.

It was discussed with @adamwathan here: https://discord.com/channels/486935104384532500/1341775942846255145

[wongjn]

For reference, repo link is https://github.com/adambirds/tailwind-issue-reproduction.

Running the repo, I only get the message "Error loading posts." and no table shows up like your screenshots.

Either way perhaps you can try /dist or /dist/ instead of dist/ in .gitignore. The slash at the beginning should "anchor" the ignore pattern to only the same folder that the .gitignore file is in, whereas dist without the / prefix would match any dist folders anywhere in the file tree. Perhaps the Tailwind scanner might follow this rule too.

Edit

Yup, doing the above seems to work:

Git diff

diff --git a/.gitignore b/.gitignore
index 4717503..8f4dc00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,4 @@ yarn-error.log*
 next-env.d.ts
 
 # dist
-dist/
+/dist
diff --git a/src/app/globals.css b/src/app/globals.css
index 267dd9a..dd6b226 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,6 @@
 @import 'tailwindcss';
 /* @source '../../node_modules/tablewind'; Doesn't work */
-@source '../../node_modules/tablewind/dist';
+@source '../../node_modules/tablewind';
 
 @theme {
   --color-background: var(--background);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a31a6a0..fbdf535 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,7 +15,7 @@ interface User {
 export default function Home() {
   const router = useRouter();
 
-  const [refreshKey, setRefreshKey] = useState(0);
+  const [refreshKey] = useState(0);
 
   const columns = [
     {label: "Name", accessor: "name", sortable: true, editable: false},
@@ -31,7 +31,7 @@ export default function Home() {
         columns={columns}
         pageTitle="Users"
         key={refreshKey}
-        endpoint="http://localhost:3001/api/users"
+        endpoint="https://api.restful-api.dev/objects"
         />
     </div>
   );

[adambirds]

Yeah, @wongjn, that is also a workaround, but the dicussion with Adam was him leaning towards looking for a solution still, to potentiall change the scanner to essentially whitelist everything under the @source path as thats what most would assume it does. And whilst i wrote this package so i knew the file format, it could affect any package if there is a match somehow.

Try changing endpoint="http://localhost:3001/api/users" to endpoint="http://localhost:3000/api/users" or whatever port it ends up running on in page.tsx to fix the error. The table will show (with no posts still).

[philipp-spiess]

One issue is that every node module will also have a node_modules folder, so if we were to follow all files if you link your source to something like ../../node_modules/tablewind, it means that it would also include all files in ../../node_modules/tablewind/node_modules and that can have more dependencies etc.

Perhaps we need to special case node_modules, so that a custom source like ../../node_modules/tablewind won't follow .gitignore rules but still does not go into transitive node_modules again. 🤔

[adambirds]

One issue is that every node module will also have a node_modules folder, so if we were to follow all files if you link your source to something like ../../node_modules/tablewind, it means that it would also include all files in ../../node_modules/tablewind/node_modules and that can have more dependencies etc.

Perhaps we need to special case node_modules, so that a custom source like ../../node_modules/tablewind won't follow .gitignore rules but still does not go into transitive node_modules again. 🤔

Yeah I think the latter makes sense @philipp-spiess. I reckon that was what @adamwathan was thinking when he said this in the discord

yeah it might make sense for it to throw out gitignore stuff but keep the other heuristics, like ignoring image files and stuff like that

I think in the meantime (if this is something that needs a good think about and may take a while) I think the docs here need updating to make it clear that paths matching the .gitignore will still be excluded inisde this path.