tailwind .pages folder error

[jullic]

What version of Tailwind CSS are you using?

v4.1.1

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

Vite 6.2.0

What version of Node.js are you using?

v20.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/jullic/tailwind-.work-folder-error-

Describe your issue

I'm using vite.
tailwind version 4.1.1

If the name of the folder where the components are located ends with “.pages”, then the utility classes used in the components in that folder are not applied.

I spent several hours trying to figure out what the problem might be, but I haven't figured it out yet, maybe there are some other patterns in which utility classes are not applied.

[wongjn]

Seems like because pages is included as a binary file extension that Tailwind's scanner ignores:

tailwindcss/crates/oxide/src/scanner/fixtures/binary-extensions.txt

Line 148 in 5a77c9d

pages

tailwindcss/crates/oxide/src/scanner/auto_source_detection.rs

Lines 45 to 54 in 5a77c9d

	pub static BINARY_EXTENSIONS_GLOB: sync::LazyLock<String> = sync::LazyLock::new(|| {
	format!(
	"*.{{{}}}",
	include_str!("fixtures/binary-extensions.txt")
	.trim()
	.lines()
	.collect::<Vec<&str>>()
	.join(",")
	)
	});

And it seems the globbing doesn't differentiate between a folder or a file.

As a work-around, you can register that directory explicitly in src/06.app/styles/index.css:

@source "../../05.pages";

[adamwathan]

Ah yep good catch, we should not be filtering out directories based on those rules, just files. Will look into it this week!

[jullic]

Thank you very much for solving the problem.
This has potentially saved a lot of time for people who would have encountered it for the first time.  
☺️