해결 방법: TailwindCSS IntelliSense에서 사용자 지정 유틸리티 클래스 이름을 선택할 수 없습니다.

최근에 TailwindCSS로 오랫동안 저를 괴롭혔던 큰 문제를 마침내 해결했습니다. 그것은 TailwindCSS 인텔리전스가 @layer 지시문을 사용하여 사용자 지정 유틸리티 클래스 이름을 선택하지 않는다는 것입니다.

TailwindCSS로 앱을 빌드할 때 어느 시점에서 사용자 정의 스타일을 추가해야 합니다. tailwind.config.js 파일 내에 사용자 정의 스타일을 추가할 수 있습니다. 이런 식으로 TailwindCSS 인텔리전스가 올바르게 선택할 수 있습니다.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary_colour_light_blue: "#40A8F5",
      },
    },
  },
};

하지만 훨씬 더 복잡한 스타일을 원한다면? 다음 단계는 방금 앱 루트에 삽입한 CSS 파일에서 @layer 지시문을 사용하는 사용자 지정 유틸리티 클래스의 도움으로 자연스럽게 이루어집니다. 1

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  ".text-header1": {
    @apply font-sans text-[32px] font-medium leading-[42px];
  }
  ".custom-shadow": {
    boxshadow: "0px 0px 0px 3px rgba(64, 168, 245, 0.2)";
  }
}

그리고 여기에 문제가 있습니다. 이것이 작동할 수 있지만 TailwindCSS는 이 클래스 이름을 제거하지 않고 CSS로 올바르게 다이제스트하므로 TailwindCSS 인텔리전스가 이 클래스를 선택할 수 없습니다. 따라서 IDE에서 클래스 자체text-header1를 가리키면 스타일 정보가 표시되지 않습니다(문제)2 이유는 매우 간단합니다. TailwindCSS 인텔리전스는 파일을 읽고 주입 파일을 찾지 않습니다. , 프로젝트의 루트에서 tailwind.config.js만 읽습니다.

그렇다면 TailwindCSS 인텔리전스에서 선택할 수 있는 사용자 지정 스타일을 어떻게 추가할 수 있습니까? 구조를 위한 Tailwind 플러그인이 제공됩니다.

Tailwind CSS 플러그인

TailwindCSS 플러그인을 사용하여 원하는 사용자 지정 스타일을 추가할 수 있으며 인텔리전스가 자동으로 선택합니다. 사용자 정의 유틸리티 클래스를 추가하는 방법은 매우 간단합니다.

module.exports = {
  plugins: [
    ({ addUtilities, addComponents }) => {
      addUtilities({
        ".custom-shadow": {
          boxShadow: "0px 0px 0px 3px rgba(64, 168, 245, 0.2)",
        },
      });
    },
  ],
};

플러그인3에 @apply 지시문을 추가할 수도 있습니다.

module.exports = {
  plugins: [
    ({ addUtilities, addComponents }) => {
      addUtilities({
        ".test-color-red": {
          "@apply text-red-900": {},
        },
      });
    },
  ],
};

플러그인을 설정한 후 인텔리전스는 이제 사용자 지정 스타일을 올바르게 선택할 수 있지만 이는 이상적인 솔루션이 아니라 편리한 해결 방법일 뿐입니다. TaiwlindCSS가 이 문제를 기본적으로 지원하는 날이 오기를 고대하고 있습니다.

다음은 몇 가지 작업 예입니다. instill-ai/console

사진 제공: Jené Stephaniuk on Unsplash



TailwindCSS installation example - Next.js ↩

Tailwind IntelliSense does not list my custom class in @layer Utilities #227 ↩

JS API for using @apply in Plugins ↩