Intellisense not working in Angular Decorator

[anthony-b-dev]

What version of VS Code are you using?

v1.91.1

What version of Tailwind CSS IntelliSense are you using?

v0.12.5

What version of Tailwind CSS are you using?

v3.4.4

What package manager are you using?

npm

What operating system are you using?

Windows

Tailwind config

const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const plugin = require('tailwindcss/plugin');
const { join } = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {
      colors: {
        'forge-shark': {
          500: '#1C1C1F',
          600: '#161619',
          700: '#111113',
          800: '#0B0B0C',
          900: '#060606',
        },
        'forge-mercury': {
          100: '#FAFAFA',
          200: '#F6F5F5',
          300: '#F1F0F0',
          400: '#EDEBEB',
          500: '#E8E6E6',
        },
        'forge-orange': {
          50: '#E7CFC0',
          100: '#E6B799',
          200: '#E6A073',
          300: '#E5884D',
          400: '#E47126',
          500: '#E35900',
          600: '#C24F05',
          700: '#A1450A',
          800: '#803B10',
          900: '#5E3015',
          950: '#3D261A',
        },
        'forge-blue': {
          50: '#C1D7E6',
          100: '#9BC7E5',
          200: '#74B8E5',
          300: '#4DA9E4',
          400: '#2799E4',
          500: '#008AE3',
          600: '#0578C2',
          700: '#0965A2',
          800: '#0E5381',
          900: '#134160',
          950: '#172E40',
        },
      },
      textShadow: {
        sm: '0 1px 2px var(--tw-shadow-color)',
        DEFAULT: '0 2px 4px var(--tw-shadow-color)',
        lg: '0 8px 16px var(--tw-shadow-color)',
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') },
      );
    }),
  ],
};

VS Code settings

{
    "git.ignoreLimitWarning": true,
    "prettier.bracketSameLine": true,
    "files.associations": {
      "*.css": "tailwindcss"
    },
    "editor.quickSuggestions": {
      "other": "on",
      "comments": "off",
      "strings": "on"
    }
}

Reproduction URL

Just generate a standalone component and attempt to apply some styles in the component's decorator.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'button[fge-btn]',
  standalone: true,
  imports: [CommonModule],
  styles: `
    @import 'tailwindcss/base';
    @import 'tailwindcss/components';
    @import 'tailwindcss/utilities';

    :host {
      @apply bg-forge-orange-500 hover:text-forge-orange-500 hover:border-forge-orange-500 h-[36px] min-w-max self-center rounded-full px-4 text-sm font-bold text-white transition-all duration-150 ease-in-out hover:scale-105 hover:border-2 hover:bg-transparent lg:h-[50px] lg:px-8 lg:text-lg;
    }
  `,
  template: '<ng-content/>',
  // host: {
  //   class:
  //     'bg-forge-orange-500 hover:text-forge-orange-500 hover:border-forge-orange-500 h-[36px] self-center rounded-full px-4 text-sm font-bold text-white transition-all duration-150 ease-in-out hover:scale-105 hover:border-2 hover:bg-transparent lg:h-[50px] lg:px-8 lg:text-lg min-w-max',
  // },
})
export class FgeBtnComponent {}

Describe your issue

Intellisense doesn't work when I apply the tailwind classes in the "styles" property of the decorator, nor in the "host" property, but it does work in the "template" property.

[jpike88]

oof this one is becoming quite painful. what's involved in the fix here?