[v4.1.4] Keyframes are not generated for the second config

[artaommahe]

What version of Tailwind CSS are you using?

For example: v4.1.4

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

Vite 6.0.1

What version of Node.js are you using?

v20.18.1

What browser are you using?

latest Chrome

What operating system are you using?

latest macOS

Reproduction URL

• clone https://github.com/artaommahe/tailwind-v4-missed-keyframes
• npm install
• npm run dev
• see that a block with red border doesn't wiggle despite having wiggle animation set
• uncomment empty @theme {} declaration in src/new-design/new-design.css
• see that block finally wiggles

Describe your issue

Keyframes are not generated for animations in 'secondary' config, the animation class itself is present.

We have a case when we're slowly migrating from one design system with old set of tokens to the new one and for this we have 2 tailwind configs where the second one is scoped under a class by important: '.new-design', config value.
During upgrade to tailwind v4 we've noticed that animation keyframes defined in the second config are not generated and don't work. For some reason there is a workaround with adding an empty @theme {} block to the corresponding css file.

[wongjn]

Keyframes are sort of theme variables. That means there needs to be somewhere for them to be output. It seems like Tailwind uses the first @theme rule as an indicator to output the @keyframes rules:

tailwindcss/packages/tailwindcss/src/index.ts

Lines 583 to 601 in adcf1de

	if (firstThemeRule) {
	let nodes = []
	for (let [key, value] of designSystem.theme.entries()) {
	if (value.options & ThemeOptions.REFERENCE) continue
	nodes.push(decl(escape(key), value.value))
	}
	let keyframesRules = designSystem.theme.getKeyframes()
	for (let keyframes of keyframesRules) {
	// Wrap `@keyframes` in `AtRoot` so they are hoisted out of `:root` when
	// printing. We push it to the top-level of the AST so that an eventual
	// `@reference` does not cut it out when printing the document.
	ast.push(context({ theme: true }, [atRoot([keyframes])]))
	}
	firstThemeRule.nodes = [context({ theme: true }, nodes)]
	}

You can import tailwindcss/theme to avoid your problem:

+@layer theme, base, components, utilities;
+
+@import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);

Then, you can reset the default theme if you were omitting it because you didn't want to use Tailwind's default theme:

 @layer theme, base, components, utilities;
 
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);

+@theme {
+  --*: initial;
+}
+
 @config '../../tailwind.new-design.config.js';