Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Intellisense not working in Angular Decorator #1026

Open
anthony-b-dev opened this issue Jul 30, 2024 · 0 comments
Open

Intellisense not working in Angular Decorator #1026

anthony-b-dev opened this issue Jul 30, 2024 · 0 comments
Assignees

Comments

@anthony-b-dev
Copy link

anthony-b-dev commented Jul 30, 2024

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.

@thecrypticace thecrypticace self-assigned this Aug 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants