[IntelliSense] when using Angular host.class

[leon]

Since we have started using tailwind in Angular I have switched from using a scss file per component, to not having to have a scss file at all.

And by setting encapsulation: ViewEncapsulation.None we let tailwind do all the styling work, which has worked great :)

The only problem I have is that because the host: { class: '...' } is within the @Component decorator tailwinds auto complete doesn't work.

Would it be possible to also be able to get auto completion here?

@Component({
  selector: 'app-button',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app-button.component.html',
  host: {
    class: 'block bg-white rounded-sm' // this is where I want auto completion
  }
})
export class ButtonComponent {}

[wongjn]

You can look at using the tailwindCSS.experimental.classRegex setting. Since it is experimental, there's not much documentation on it, but an internet search should hopefully get you going to set it up for your use case.

[leon]

For those of you looking at this later on this is what worked for me.

Add this to your settings.json

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

[SeraphCoding]

2 year old random answer on a small thread - exactly what I was looking for. Thank you so much!

[HitomiTenshi]

@leon's regex has one problem: Prettier adds a newline between class: and the string when the class list is very long, which the regex doesn't catch.

Additionally, Angular also allows to dynamically add a single class with the '[class.my-class]': 'myBooleanValue' syntax.

I updated the regex to support tailwind's autocomplete for both cases:

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