@tailwindcss/cli produces corrupted and incomplete css

[sschafercdd]

What version of Tailwind CSS are you using?

4.0.7

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

Just the cli:
npx @tailwindcss/cli -i app/assets/stylesheets/tailwind_decl.css -o app/assets/stylesheets/tailwind.css

What version of Node.js are you using?

v20.18.2

What browser are you using?

n/a

What operating system are you using?

OS X

Reproduction URL

The file app/assets/stylesheets/tailwind_decl.css contains the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

The output is both invalid CSS AND is missing expected classes like rounded-xs.

The mini-css-extract-plugin chokes on this file, specifically the line:
.[c:0]:[nX2;!$(n1nnnc1):1]:[nX2:2]:[nX3;H:3]:[nX2:4] {

2025-02-20 20:29:02 ERROR in ./app/assets/stylesheets/tailwind.css
2025-02-20 20:29:02 Module build failed (from ./node_modules/.pnpm/mini-css-extract-plugin@1.6.2_webpack@5.97.1/node_modules/mini-css-extract-plugin/dist/loader.js):
2025-02-20 20:29:02 ModuleBuildError: Module build failed (from ./node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.5.1_typescript@4.9.5_webpack@5.97.1/node_modules/postcss-loader/dist/cjs.js):
2025-02-20 20:29:02 Error: Expected a backslash preceding the semicolon.
2025-02-20 20:29:02 at /tmp/src/app/assets/stylesheets/tailwind.css:2037:1

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[philipp-spiess]

Hey! Mind sharing a repro for that? The input CSS is Tailwind CSS v3 code and you mentioned you're using Tailwind CSS v4 so you might also want take a look at the upgrade guide: https://tailwindcss.com/docs/upgrade-guide

[sschafercdd]

OK, here's a repo: https://github.com/scottschafer/tailwind-cli-issue

I'm trying to use this in a large Ruby on Rails app that has been upgraded from really old versions but still is a bit creaky. I've tried using the Rails Gems, I've tried the postcss plugins….so far nothing is working except for using the CDN and to a limited extent, the CLI. I'm a little concerned about how the tailwind plugins might handle HTML generated through rails code (ruby and HAML etc).

So I've tried the CLI and am wrestling with a few things:

1. The Tailwind CSS generated by the CLI actually seems to work if included in the browser. It's just that the "mini-css-extract-plugin" chokes on it. Possibly I can work around that. Also, https://jigsaw.w3.org/css-validator/ reports errors in the CSS. Maybe we don't care about that.
2. When I use the CLI, it doesn't actually seem to scan my classes. For example, I use "rounded-md" but that is not emitted in "tailwind_compiled" when I run "npm run build:tailwind".
3. Is the CLI actually using the "tailwind.config.js"? I'm not seeing much evidence of that. If I introduce an error to the file, it has no effect. And in the larger Rails app, this process is very slow (about 2 min) even if I add a "content" entry to limit the source files processed.