Component classes imported are not recognized in v4.4.0

[CHC383]

Description

Classes imported in the main css file into the component layer are not recognized (better-tailwindcss/no-unknown-classes) after updating to v4.4.0, detectComponentClasses is enabled.

Flavor

CSS

Code Input

/* globals.css */
@import "../styles/example-a.css" layer(components);
@import "../styles/example-b.css" layer(components);

/* example-a.css */
.a-class {
    @apply text-sm
}

/* example-b.css */
.b-class {
    @apply text-md
}

Expected Behavior

Using a-class and b-class in the code without lint error.

Actual Behavior

The code example above is a simplified version, in my actual case, classes from one imported css file is are recognized, while the ones from the other file are not.

Reproduction URL

No response

ESLint Log

   33:10  error  Unknown class detected: cn-alert-dialog-overlay      better-tailwindcss/no-unknown-classes
   55:12  error  Unknown class detected: cn-alert-dialog-content      better-tailwindcss/no-unknown-classes
   71:22  error  Unknown class detected: cn-alert-dialog-header       better-tailwindcss/no-unknown-classes
  100:22  error  Unknown class detected: cn-alert-dialog-media        better-tailwindcss/no-unknown-classes
  113:22  error  Unknown class detected: cn-alert-dialog-title        better-tailwindcss/no-unknown-classes
  126:22  error  Unknown class detected: cn-alert-dialog-description  better-tailwindcss/no-unknown-classes

ESLint Config

{
    files: ["**/*.tsx"],
    plugins: {
      "better-tailwindcss": eslintPluginBetterTailwindcss,
    },
    rules: {
      ...eslintPluginBetterTailwindcss.configs["recommended-error"].rules,

      "better-tailwindcss/enforce-consistent-line-wrapping": "off", // Conflict with prettier
      "better-tailwindcss/no-unknown-classes": [
        "error",
        {
          ignore: [
            "daisy-footer-center", // Can't detect correctly, https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/src/components/footer.css#L10
          ],
        },
      ],
      "better-tailwindcss/enforce-shorthand-classes": "error",
      "better-tailwindcss/enforce-consistent-important-position": "error",
    },
    settings: {
      "better-tailwindcss": {
        entryPoint: "src/app/globals.css",
        detectComponentClasses: true,
        selectors: [
          ...getDefaultSelectors(), // preserve default selectors
          // See https://github.com/schoero/eslint-plugin-better-tailwindcss/blob/main/src/options/callees/cn.ts
          {
            kind: SelectorKind.Callee,
            match: [{ type: MatcherType.String }],
            name: "cnFast",
          },
          {
            kind: SelectorKind.Callee,
            match: [{ type: MatcherType.ObjectKey }],
            name: "cnFast",
          },
        ],
      },
    },
  }

Versions

• ESLint: v10.2.0
• Parser: @typescript-eslint/parser v8.58.1
• Plugin: v4.4.0
• Node: v24.14.1

[schoero]

Should be fixed in the latest release. Please report back if something is still not working.

[CHC383]

Unfortunately the issue still exists with v4.1.1

[themagicalmammal]

Still exists on 4.4.1

[schoero]

I fail to reproduce the issue. There must be some other problem that causes this, because the setup you have described works in a minimal reproduction repository: https://github.com/schoero/repro/tree/better-tailwindcss/%23360.

I also tried adding daisyUI to that repo, and it still worked.

Is there anything else specific about your setup, for example a monorepo or workspace configuration?

It would be great if someone could create a minimal reproduction for this.

[CHC383]

@schoero Sorry my original report was over simplified, I should have spent some time to create a reproduction.

Here is a reproduction based on yours: CHC383/eslint-plugin-better-tailwindcss-repro@better-tailwindcss/%23360. I have to add the css setup from shadcn/ui to trigger the problem, the root cause may be hidden somewhere in that complicated setup.

[schoero]

Thanks for the reproduction.

The issue is actually in the package tailwind-csstree since v0.2.0. You can fix it by pinning the version of tailwind-csstree to v0.1.5.

// package.json
"overrides": {
  "tailwind-csstree": "0.1.5"
}

Someone already made a PR that fixes it upstream: humanwhocodes/tailwind-csstree#58.

[CHC383]

@schoero The upstream fix has been released in tailwind-csstree v0.3.2