@theme directives ignored by tailwindcss cli -i when imported via @import

[jeff-computers]

What version of Tailwind CSS are you using?

v4.1.13

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

"@tailwindcss/cli": "^4.1.13",

What version of Node.js are you using?

v22

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

Incredibly easy to reproduce: https://github.com/jeff-computers/tailwind-import-bug-repro

Describe your issue
Using tailwindcss to generate built files - you cannot use @import syntax to import css files using @theme directives.

• If an @theme directive is declared in a css file @import(ed) into the input for tailwindcss -i - then the @theme declaration is not included in the output:

• If the file declaring the @theme directive is used as the 'input' for tailwindcss -i then the built file is copied directly and missing the /*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */ comment - which suggests something is being skipped

[thecrypticace]

@theme should never make it into the built CSS so the output from via-import is correct. I do wonder why it does in the direct case though. 🤔

edit: to be clear @theme controls what utilities are available, what colors are defined, etc…

[thecrypticace]

This produces the right output even when foo.css is empty so it seems just the presence of an @import changes the behavior here:

@import "./foo.css";

@theme {
  --tracking-narrower: -0.02em;
}

[jeff-computers]

@thecrypticace thanks for checking the issue. So in the scenario where I want to declare a custom color utility like --color-accent-foreground in a ui package (turborepo for the sake of argument but doesn't matter), what is the correct approach?

[thecrypticace]

You import the css file with the @theme from the package. You shouldn't be compiling it beforehand.

[jeff-computers]

ack, I've been so trained on having to compile ts to js that I brain farted and forgot this isn't required with css