content argument no longer exists in @tailwindcss/cli?

[ivenuss]

Hey, I've been using content argument in tailwindcss CLI command in V3.

I used this argument to generate CSS output for specific HTML file in my project.

Usage:

npx tailwindcss --content=./page.html -i input.css -o output.css

Can this be done in V4 using @tailwindcss/cli?

[wongjn]

Not directly via a flag passed to the CLI. However, you can use the @source directive to specify content sources to scan.

Thus, if you wanted to keep a similar CLI API, you could write your own CLI script that:

1. Creates a temporary input CSS file like:

   @import "./input.css";
   @source "page.html";

2. Passes the this input CSS file to tailwindcss.

   npx tailwindcss -i temp-input.css -o out.css

3. Deletes the temporary input CSS file after.

[ivenuss]

The problem is not that the html file cannot be found, but that the generated output contains utility classes from whole project + the source target.

The goal is that I want to generate only CSS from the specified target, which was possible using content in V3.

[ivenuss]

If I could explicitly say that the @source is only the page.html and nothing else

[wongjn]

You can set source(none)

[ivenuss]

Is it possible to override the base config for the project that already already have @import 'tailwindcss'; without source(none)

For example I have following base config:

/* base.css - base theme config, etc. */
@import 'tailwindcss';

/* Other imports, etc. */

@theme {
  ...
}

Temporary CSS input file:

/* Use source(none) when import base config */
@import "./base.css" source(none);

/* Override the import from base.css to source none */
@import 'tailwindcss' source(none);

@source "page.html";

I know I could have base config that doesn't import tailwindcss, but that's another CSS config file..