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?

[thecrypticace]

Hey! So a couple things:

1. Our "Tailwind CSS" language mode operates on entire files. It doesn't pick up arbitrary strings / template literals and treat them as a different language.
2. The rest of the language server that picks up on @apply stuff is detected and handled in <style> tags in HTML but, like above, not in arbitrary strings.

I unfortunately do not have a good workaround for this as things aren't currently architected in a way that makes one feasible (yet).

I'm gonna close this one for now but I would definitely like to improve this in the future. I don't have a timeline for it but if / when it does happen it will require the use of a tagged template literal to denote which part of the document is CSS.

Aside: When using IntelliSense for v4 we require the use of a CSS file to initialize a project. I'd recommend authoring stuff using the global stylesheet and just classes in the templates to get the best experience instead of using the styles property on a per-component basis if at all possible.