커스텀 플러그인?

Tailwind CSS에서 제공하는 기능으로,

프로젝트에 사용할 수 있는 커스텀 스타일을 지정할 수 있는 기능이다.

해당 기능은 tailwind.config.ts 에서 사용할 수 있다.

기본 구조

// tailwind.config.ts 파일 기본 구조
import type { Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";

const config: Config = {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      // theme 확장
    },
  },
  plugins: [
    plugin(function({ addUtilities, addComponents, addBase, theme }) {
      // 커스텀 스타일 정의
    })
  ],
};

export default config;

plugins을 활용하면 theme 확장만으론 한계가 있던 커스텀 ui들을 자유롭게 설정할 수 있다.

사용해보기

필자는 해당 기능을 Typography 시스템을 구축하기 위해 사용하였다.

해당 시스템을 만들기 위해서 plugins의 함수 중 addComponents를 사용하였다.

addComponents?

여러 속성을 묶은 재사용 가능 컴포넌트 스타일을 작성할 수 있는 함수이다.

CSS-in-JS 구문을 사용하여 스타일을 작성하면 tailwind 내에서 기본 컴포넌트처럼 사용할 수 있게 된다.

이제 addComponents를 사용하여 Typography 시스템을 구축해보자.

앞선 기본 구조에서 커스텀 스타일 정의 부분에 원하는 스타일을 지정해보자.

예시로 text-header 타입을 작성해보자.

text-header의 경우,

• PretendardVariable 폰트의 bold
• 폰트 크기: 28px
• 행간: 34px
• 자간: -0.7px

의 스타일을 가지고 있다.

해당 스타일을 플러그인으로 등록하면 다음과 같다.

plugins: [
    plugin(function ({ addComponents }) {
      // 폰트 플러그인 추가
      addComponents({
        ".text-header": {
          fontFamily: "Pretendard-Bold",
          fontSize: "28px",
          lineHeight: "34px",
          letterSpacing: "-0.7px",
        }
      });
    }),
  ],

위와 같이 작성하면 추후 className 내에셔 다음과 같이 사용할 수 있게 된다.

<Text className="text-header">테스트</Text>

해당 기능을 통해 프로젝트의 Typography 시스템을 깔끔하게 작성할 수 있게 되었다.