@source glob wildcard ** does not discover files with same child folder name as parent folder

[spiess-demos]

What version of Tailwind CSS are you using?

v4.1.7

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

Does not matter, occurs with Webpack/postcss-loader as well as Vite.

What version of Node.js are you using?

v20.19.1

What browser are you using?

Chrome 134.0.6998.165

What operating system are you using?

Debian GNU/Linux trixie/sid Kernel 6.12.12-amd64

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-xzdvwn3v?file=src%2Fstyle.css
The stackblitz seems to work in a recent Google Chrome, however Firefox throsw lots of errors (not related to my things, i suppose).

Edit: as @wongjn correctly points out, the reproduction does not reprocuce the issue correctly, i just used a wrong class name coincidentally. However the issue occurs in a real project.

Describe your issue

In a rather large monorepo, we have recently migrated to Tailwind 4 and came across an issue with how @source resolves certain globs. We disable auto detection with source(none), to speed things up, and then add certain folders to discover markup using grep syntax. However if a folder happens to contain a folder with the same name, the ** wildcard cannot be used to target the source files.

The style.css file:

@import 'tailwindcss' source(none);

/*
  This does not work - .bg-black-500 can not be found in the final css file.
  Issue seems to occur when the ** glob wildcard is used in a situation 
  where a child folder is named the same as a parent folder within the glob string.
*/
@source 'addon/path/addon/**/*.html';

/*
  This works - .bg-green-500 can be found in the final css file.
  Issue seems to occur only with similar folder names.
*/
@source 'addon/path/otherAddon/**/*.html';

/* 
  This works - .bg-cyan-500 can be found in the final css file.
  Specifying a path without the ** wildcard seems to work even with
  child folders with the same name as a parant folder.
*/
@source 'addon/path/addon/component/*.html';

Folder structure:

src
  /addon
    /path
      /addon
        /component
        /otherComponent
      /otherAddon
        /component

With the above @source configuration, markup in addon should be discovered as well as in otherAddon. However this is not the case, content in addon (which repeats the name of the outermost addon folder) is only discovered if no ** wildcard is used to target it.

[wongjn]

bg-black-500 wouldn't be a class name that Tailwind would generate a CSS rule for with your current configuration. Changing it to bg-black seems to work: https://stackblitz.com/edit/vitejs-vite-67tulf8h?file=src%2Faddon%2Fpath%2Faddon%2FotherComponent%2FBlack.html

[spiess-demos]

thanks for pointing this out, however it was only coincidence that in my reproduction i was mistakenly using the wrong class - in my project i could indeed narrow it down to the folder thing.

[wongjn]

Please consider providing a git repo/reproduction that reproduces the unexpected behavior.

[thekingofspain]

I am having similar issues with referenced class names not being included/generated with a mono repo using vite:

addins
      project 1
            src
      ...
      project n
            src

common
      src
            styles
                  global.css

What is the proper way to usage of the @import tailwindcss and any related source/@source in the global.css file that will cover the entire monorepo?

Odd thing is sometimes after tweaking the global.css file it will pick up the missing class names, then at a later time it forgets them again.

[thekingofspain]

For now at least this has corrected the missing class issue for me:

@import "tailwindcss" source("none");
@source "../../../addins/**";
@source "../../**";