tailwindCSS.classAttributes custom name when using typescript not working

[isimmons]

What version of VS Code are you using?

1.80.0

What version of Tailwind CSS IntelliSense are you using?

0.9.11

What version of Tailwind CSS are you using?

3.2.1

What package manager are you using?

npm

What operating system are you using?

Windows 10

Tailwind config

const defaultTheme = require('tailwindcss/defaultTheme')
const stripesPlugin = require('./stripes-plugin.cjs')

module.exports = {
  content: ['./src/**/*.{astro,js,jsx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Open Sans', 'sans-serif', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require('@tailwindcss/typography'), stripesPlugin],
}

VS Code settings

{
  "tailwindCSS.classAttributes": ["class", "className", "ngClass", ".*Classes"],
  "tailwindCSS.experimental.classRegex": [
    // Support for the `cx()` function from classnames / clsx
    ["cx\\(([^)]*)\\)", "(?:\"|'|`)([^(?:\"|'|`)]*)(?:\"|'|`)"]
  ]
}

Reproduction URL

Describe your issue

Working on dynamic class lookup based on component props in a Button.tsx component in Astro. I need several classes objects so I added the custom name in settings.json tailwindCSS.classAttributes as you see above.

Now with simple demos, this does not work when I use TS annotations. But it works if I use TS assertion

const fooClasses = 'bg-indigo-500'; // works
const fooClasses = 'bg-indigo-500' as string; // works
const fooClasses: string = 'bg-indigo-500'; // not working

const fooClasses = {
  foo: 'bg-indigo-500' // works
}
const fooClasses = {
  foo: 'bg-indigo-500'
} as Record<string, string> // works

const fooClasses: Record<string, string>  = {
  foo: 'bg-indigo-500'  // not working
}

I can modify the existing custom name or add another one like ".*Classes.*" and all of the above works and even this works

const impactClasses: Record<ButtonProps['impact'], string> = {
  bold: 'bg-indigo-500 text-white shadow-md hover:bg-indigo-600 disabled:shadow-none',
  light: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200',
  none: 'bg-transparent text-indigo-700 hover:bg-indigo-50',
}

But when I go more complex with embedded objects, adding more ".*.*" at the end of my custom name doesn't fix it.

This does not work

const impactClasses: Record<
  ButtonProps["tone"],
  Record<ButtonProps["impact"], string>
> = {
  default: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
  danger: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
  success: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
};

This works and completely removing the type annotation works but of course removing the type annotation removes the TS portion of autocomplete and type safety

const impactClasses = {
  default: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
  danger: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
  success: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
} as Record<ButtonProps["tone"], Record<ButtonProps["impact"], string>>;

So I guess the question/issue is how to make .*Classes.* extend further for embedded objects? I would like to avoid using 'as' but I don't understand how the extension parses my custom classes object name and where TS comes into play.

[isimmons]

I was causing part of the issue.

This now seems to be working for all cases with the extra .* on the end of ".*Classes.*"

"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    ".*Classes.*"

I had additional TS errors that showed up after I turned on strict mode in tsconfig.
Specifically, this doesn't work because my ButtonProps are optional

const impactClasses: Record<
  ButtonProps["tone"],
  Record<ButtonProps["impact"], string>
> = {
  default: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
  danger: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
  success: {
    bold: "bg-indigo-500 text-white shadow-md hover:bg-indigo-600",
    light: "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
    none: "bg-transparent text-indigo-700 hover:bg-indigo-50",
  },
};

Strangely this works at only one level deep even though it is still showing the TS error for the same reason as above

const impactClasses: Record<ButtonProps['impact'], string> = {
  bold: 'bg-indigo-500 text-white shadow-md hover:bg-indigo-600 disabled:shadow-none',
  light: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200',
  none: 'bg-transparent text-indigo-700 hover:bg-indigo-50',
}

So I fixed that part by replacing all of my ButtonProps with strict unions since they are defined outside the component and don't really rely on ButtonProps.

// like this
type ButtonImpact = "bold" | "light" | "none";
const impactClasses: Record<ButtonImpact, string> = {
  bold: 'bg-indigo-500 text-white shadow-md hover:bg-indigo-600 disabled:shadow-none',
  light: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200',
  none: 'bg-transparent text-indigo-700 hover:bg-indigo-50',
}

// instead of this
const impactClasses: Record<ButtonProps['impact'], string> = {
  bold: 'bg-indigo-500 text-white shadow-md hover:bg-indigo-600 disabled:shadow-none',
  light: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200',
  none: 'bg-transparent text-indigo-700 hover:bg-indigo-50',
}

The issue still left though, is that I can name my Classes objects anything as long as "Classes" is part of it.
fooClassesPlusAnythingElse = {...} also works

So I'm still lost on why the extension doesn't simply match ".*Classes" as the name of the object, regardless of TS annotations or how many levels deep the object is.

[bradlc]

Hey @isimmons, there's a few things going on here and I'll try my best to explain everything.

Firstly, I think there's some confusion regarding the tailwindCSS.classAttributes setting. This setting allows you to specify which HTML attributes contain Tailwind classes in your project. By default this is class, className, and ngClass. The examples that you have provided are not attributes, they are variable names. In this example className is an attribute, and className2 is a variable name:

<div className="" />

const className2 = ""

Additionally, this setting was not designed to support regular expressions, although it does by accident.

The reason that you are having success in some cases is because your variable definitions look a lot like HTML (or JSX) attributes. Take my example above: className2 = "" is very similar to className="", it just have some extra whitespace. When you start adding type annotations though, it no longer looks like an attribute, and it stops working.

So I think the main thing to mention here is that any success you are having with your tailwindCSS.classAttributes config and variable names is completely incidental and is not something that is designed to work like that. This means it may stop working at any point.

Having said that, if you change your config to the following it should work in the cases you shared:

"tailwindCSS.classAttributes": ["class", "className", "ngClass", "[\\s\\S]*Classes[\\s\\S]*"]

This is because internally the regular expression doesn't have the s flag enabled, which means that . does not match newline characters. [\s\S] will match all characters including newlines. Again, this setting is not designed to work with regular expressions or variable names and may stop working at any time, but also no immediate plans to change any of the implementation here.

An alternative solution is to wrap your lists of classes in the cx function, which will be matched by your tailwindCSS.experimental.classRegex configuration:

const impactClasses: Record<
  ButtonProps["tone"],
  Record<ButtonProps["impact"], string>
> = {
  default: {
    bold: cx("bg-indigo-500 text-white shadow-md hover:bg-indigo-600"),
    light: cx("bg-indigo-100 text-indigo-700 hover:bg-indigo-200"),
    none: cx("bg-transparent text-indigo-700 hover:bg-indigo-50"),
  },
  danger: {
    bold: cx("bg-indigo-500 text-white shadow-md hover:bg-indigo-600"),
    light: cx("bg-indigo-100 text-indigo-700 hover:bg-indigo-200"),
    none: cx("bg-transparent text-indigo-700 hover:bg-indigo-50"),
  },
  success: {
    bold: cx("bg-indigo-500 text-white shadow-md hover:bg-indigo-600"),
    light: cx("bg-indigo-100 text-indigo-700 hover:bg-indigo-200"),
    none: cx("bg-transparent text-indigo-700 hover:bg-indigo-50"),
  },
};

Hopefully that explains what's going on and gives you some possible solutions 👍

[isimmons]

@bradlc thank you so much for the detailed explanation