`@tailwindcss/postcss` does not run on some files that use Tailwind features

[wongjn]

What version of Tailwind CSS are you using?

v4.0.0, v4.0.1

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

webpack@5.97.1, postcss-cli@11.0.0

What version of Node.js are you using?

v18.17.1, v18.18.2

What browser are you using?

N/A

What operating system are you using?

Linux in WSL

Reproduction URL

https://github.com/wongjn/tailwind-postcss

Describe your issue

An input CSS file does not get processed by Tailwind when it only has the Tailwind-specific at-rules of @reference, @variant, @custom-variant, @utility directives within it. I believe this is due to the if condition within the PostCSS plugin:

tailwindcss/packages/@tailwindcss-postcss/src/index.ts

Lines 74 to 91 in ea24995

	{
	DEBUG && I.start('Quick bail check')
	let canBail = true
	root.walkAtRules((node) => {
	if (
	node.name === 'import' ||
	node.name === 'theme' ||
	node.name === 'config' ||
	node.name === 'plugin' ||
	node.name === 'apply'
	) {
	canBail = false
	return false
	}
	})
	if (canBail) return
	DEBUG && I.end('Quick bail check')
	}

Use case is I have some separate files the don't need to compile any Tailwind utilities but should have reference to Tailwind theme tokens used elsewhere in the project.

Edit: Though @keyframes would get injected as per #15956 (comment) so perhaps this type of usage is unintended?

[RobinMalfait]

Aha yep this makes sense. We added @reference later, and we used to have @import "tailwindcss" reference. The idea is that stuff like @custom-variant, @variant and @utility won't work without some reference to Tailwind CSS itself.

I believe just adding @reference to the list should work as expected.

Will open a PR for this, thanks!