Allow configuring .ts files to include for Angular users

[leon]

What version of Tailwind CSS IntelliSense are you using?
v0.9.2

What version of Tailwind CSS are you using?
v3.2.4

What package manager are you using?
pnpm

What operating system are you using?
macOS

Tailwind config

// Paste the contents of your Tailwind config file here

VS Code settings

"tailwindCSS.experimental.classRegex": ["class:\\s'([^`]*)'"],

Describe your issue

Problem

I'm using tailwind with angular where the components are defined in the .ts files.
Since #644 was merged It no longer works for me in angular components since typescript was removed as a language that this plugin checks.

This issue is mostly as reference for others encountering the same problems.
so maybe we should add something about it to the docs?

// my-thing.component.ts
@Component({
  selector: 'my-thing',
  standalone: true,
  template: '<div>My Thing</div>',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'flex flex-col gap-4'
  }
})
export class MyThingComponent {}

So there might be more people like me out there.

I also had to add the experimental classRegex

"tailwindCSS.experimental.classRegex": ["class:\\s'([^`]*)'"],

to get it to recognise the that host: { class: '' } is tailwind.

Solution

Since there is already a way to include typescript again, that is always an option.

"tailwindCSS.experimental.classRegex": ["class:\\s'([^`]*)'"],
"tailwindCSS.includeLanguages": {
  "typescript": "javascript"
}

Improvement

But it would be better to only include it for files that are angular components.

So if possible maybe we could add the possibility to specify an array of globs where the plugin should be active?

that way in angular projects, we only activate the plugin on certain files

Some usual file name patterns in angular projects
either they use the newer syntax where everything is in the .ts file, or you import an html template.

my-thing.component.html
my-thing.component.ts

my-dialog.dialog.html
my-dialog.dialog.ts

my-button.button.html
my-button.button.ts

my-panel.panel.html
my-panel.panel.ts

[bradlc]

Hey @leon. Thanks for the suggestion. As you said I think the existing includeLanguages setting already covers this. You can also already specify globs using the tailwindCSS.experimental.configFile setting:

"tailwindCSS.experimental.configFile": {
  "./tailwind.config.js": ["./src/components/**/*.ts"]
}

I think I'm happy with the existing settings right now and wouldn't want to add additional complexity there. The only thing I'm considering now is whether we should reinstate the typescript language by default, but I'll wait and see about that.

Thanks again, and let me know if I've missed something 👍