Using standalone Tailwind CLI in a legacy project

[dextermb]

Hey all, I mentioned on Twitter yesterday that I was running into standalone CLI issues.

I checked out the DEBUG environment variable suggested by Adam but that only seemed to show what stages the CLI ran through, not what class names it found.

I'm running the following command:

DEBUG=1 tailwindcss -i tailwind.css -o styles.css -w

In the following file structure (Vue2):

├── App.vue
├── components
│   ├── Button.vue
│   ├── DiscrepancyRow.vue
│   ├── icons
│   │   ├── CircleHelp.vue
│   │   └── Ellipsis.vue
│   ├── Popover.vue
│   ├── TableCell.vue
│   └── TableHeader.vue
├── index.js
├── styles.css
└── tailwind.css

With the base tailwind.css styles:

@import "tailwindcss";

@layer base {
  button {
    text-align: left;
  }
}

An example class that isn't being generated would be ring-1 ring-stone-200 or disabled:text-stone-200 but stuff such as border border-stone-200 does work. The issue is not isolated to the stone-* color, but it's an easy example to spot.

The tailwind and @tailwindcss/cli packages are installed globally on my work machine and are on versions:

npm list -g tailwindcss --depth=0
/home/website/n/lib
└── [email protected]

npm list -g @tailwindcss/cli --depth=0
/home/website/n/lib
└── @tailwindcss/[email protected]

However in the project is an outdated version of Tailwind [but I am not using this to generate styles]:

npm list tailwindcss --depth=0
[email protected] /home/website/vesselsvalue/code/website
└── [email protected]

But a tailwind.config.js does live at the root of the project (way above my small slice), perhaps the CLI is trying to use that? Is there a flag to ignore config files or point it to a non-existent file?

Thanks in advance

[wongjn]

• Does tailwindcss -v show it is using your global v4 @tailwindcss/cli install?
• Consider checking you are not using string interpolation/concatenation to build class names.

But a tailwind.config.js does live at the root of the project (way above my small slice), perhaps the CLI is trying to use that? Is there a flag to ignore config files or point it to a non-existent file?

V4 does not load any tailwind.config.js file unless explicitly told to do so.

Otherwise, consider providing a git repo that reproduces the unexpected behavior.

[dextermb]

Does tailwindcss -v show it is using your global v4 @tailwindcss/cli install?

Unfortunately not.

tailwindcss -v > out.txt
≈ tailwindcss v4.1.3

Done in 252ms

Consider checking you are not using string interpolation/concatenation to build class names.

Correct, as a user of Tailwind for many years this is a rookie error. I am simply doing class="ring-1 ring-stone-200" in my use case.

Otherwise, consider providing a git repo that reproduces the unexpected behavior.

Unfortunately as a production system it'd be pretty hard to provide the repo, I can try and find time to create a minimal reproduction however that may prove to be hard as it would require global dependencies which may be set up different on the host machine if you were to try to replicate for example.

[dextermb]

It would be nice to have an option to list which files and directories the CLI has picked up, that way I can easily determine if it has even checked the file with the relevant ring classes. But when changing content in the specific file I do see the CLI rebuild CSS, so it's just odd.

[wongjn]

Could we double-check that you have checked the classes like ring-1 ring-stone-200 do not exist in the output CSS file itself? I can see that you have some non-layered CSS (the normalize CSS) in your output CSS which would be overriding Tailwind's CSS rules.

[dextermb]

Hi, I can confirm that the class does not exist. I have tried to capture it all in a single screenshot, see below.

1. Same location in both nvim and terminal.
2. Simple button with class="ring-1 ring-stone-200.
3. Run CLI command.
4. Search styles.css (output) for ring-1.
5. Not found