tailwind custom class 만들기 - plugin addUtilities 추가하기

tailwind에서 기본적으로 제공하지 않는 class 들을 만들어서 사용하려면 제일 간단한 방법으로는 css 파일에 class를 추가하여 사용하는 방법이 있다.

/* index.css or globals.css */

@layer utilities {
  .custom-shadow-sm {
    box-shadow: "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 20px 20px 0px rgba(0, 0, 0, 0.08)";
  }
}

다만 이렇게 하면 에디터의 자동완성 기능이 class를 인식하지 못해서 자동완성 기능이 작동하지 않는다.

// tailwind.config.ts
import { PluginAPI } from "tailwindcss/types/config";
...
plugins: [
    ({ addUtilities }: PluginAPI) => {
      addUtilities({
        ".custom-shadow-sm": {
          "box-shadow":
            "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 20px 20px 0px rgba(0, 0, 0, 0.08)",
        },
      });
    },
  ],
  

그래서 나는 자동완성 기능이 작동하도록 하기 위해 plugin을 사용했다. tailwind.config.ts 파일에 plugin을 활용해서 addUtilities의 인자로 custom class들을 넘겨주면 자동완성에 인식되도록 class를 만들 수 있다.