[BUG] : twin.macro with Styled Components doens't show errors

[DorianHenry]

Describe the bug
When I use twin.macro with Styled Components in a React project, ESLint doesn't show errors.

To Reproduce
Steps to reproduce the behavior:

1. Install twin.macro
2. Set a Tailwind error with twin.macro.

Expected behavior
It should show an error with the invalid Tailwind classes order.

Environment (please complete the following information):

• OS: [windows 11]
• Softwares + version used:
  • [VSCode 1.81.1]
  • [pnpm 8.7.1]
  • [twin.macro 3.4.0]
  • [eslint-plugin-tailwindcss 3.13.0]

Additional context
Here's an example of the code that should show an error:

import tw from "twin.macro";
const AlertWrapper = tw.div`overflow-hidden relative rounded bg-slate p-7 py-5`;
const AlertLine = tw.span`top-0 absolute  left-0 w-2 h-full bg-primary`;

eslint config

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:storybook/recommended",
    "plugin:tailwindcss/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: ["react-refresh"],

  rules: {
    "report-unused-disable-directives": 0,
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
  },
  overrides: [
    {
      files: ["*.ts", "*.tsx", "*.js"],
      parser: "@typescript-eslint/parser",
    },
  ],
  settings: {
    tailwindcss: {
      callees: ["classnames", "clsx", "ctl", "tw"],
      tags: ["tw"],
      classRegex: "^(class(Name)?)|(tw\\.\\w+)$",
    },
  },
};

[zonterone]

Hi!👋
Do you find any solutions?

[francoismassart]

Released in v3.17.0Thank you @nihalgonsalves