Tailwind CSS 커스텀 컬러 등록하기

이번 포스팅에서는 CSS 프레임워크인 Tailwind CSS에서 커스텀 컬러를 등록하는 방법을 다룬다.

1. Tailwind CSS의 컬러 커스터마이징

Tailwind는 기본값으로 지정된 Color Palette을 변경하거나, Alias를 붙이거나, 특정 색상에 이름을 붙여서 사용할 수 있게 하는 기능을 제공한다.
모든 작업은 tailwind.config.js(혹은 ts) 를 수정해서 간단하게 변경할 수 있다.

2. Color Palette 변경하기

Tailwind는 Default Color Palette를 제공해서 톤에 맞는 색상을 편하게 사용할 수 있다.
만약 기본 팔레트가 마음에 들지 않는 경우에는 변경할 수 있다.
예를 들자면 팔레트를 보다 작은 단위로 사용할 수 있게 50 단위의 색상을 추가하거나 미리 정의된 값을 덮어씌워 변경할 수도 있다.

2.1. 적용 방법

다음과 같이tailwind.config.js의 theme.extend.colors 의 항목을 수정하면 팔레트를 변경할 수 있다.
설정 내용에 대해 설명하자면 먼저 기 정의된 red-500 의 색상을 초록색 계열인 #1bce61로 변경했고, red-550 이라는 색상 구분을 추가하고 남색 계열의 색상값을 적용했다.
적용 여부를 확인하기 쉽게 일부러 다른 색상을 적용했다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        red: {
          500: "#1bce61",
          550: "#111a31",
        },
      },
    },
  },
  plugins: [],
};

테스트를 위해 다음과 같이 코드를 작성했다.

import "./App.css";

function App() {
  return (
    <>
      <div className="flex flex-col justify-center items-center p-8 gap-4">
        <div className="bg-red-400">Hello World!</div>
        <div className="bg-red-500">Hello World!</div>
        <div className="bg-red-550">Hello World!</div>
        <p className="text-red-400">Hello World!</p>
        <p className="text-red-500">Hello World!</p>
        <p className="text-red-550">Hello World!</p>
      </div>
    </>
  );
}

export default App;

2.2. 실행 결과

테스트 결과 text-red-500, bg-red-500, text-red-550, bg-red-550이 의도한 대로 적용되었다.

3. 커스텀 컬러 네이밍하기

Tailwind에서는 특정 색상에 이름을 붙여 사용할 수 있도록 지원한다.

3.1. 적용 방법

예시를 위해 iksflow 라는 보라색 컬러 팔레트와 파란색인 primary, 노란색인 secondary를 추가해보았다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        iksflow: {
          500: "#8633ff",
        },
        primary: "#3366ff",
        secondary: "yellow",
      },
    },
  },
  plugins: [],
};

테스트하는 코드는 아래와 같다.

import "./App.css";

function App() {
  return (
    <>
      <div className="flex flex-col justify-center items-center p-8 gap-4">
        <div className="bg-iksflow-500">Hello World!</div>
        <div className="bg-primary">Hello World!</div>
        <div className="bg-secondary">Hello World!</div>
        <p className="text-iksflow-500">Hello World!</p>
        <p className="text-primary">Hello World!</p>
        <p className="text-secondary">Hello World!</p>
      </div>
    </>
  );
}

export default App;

3.2. 실행 결과

테스트 결과 지정한 색상대로 잘 나오는 것을 확인할 수 있다.

4. 주의사항

커스텀 컬러를 적용할 때 주의할 사항은 tailwind.config.js 파일을 수정할 때 반드시 extend에 추가해야 한다는 것이다.
실수로 아래와 같이 extend 가 아닌 그보다 상위 레벨에 적용하면 Default Color Palette 마저 싹다 날려버리고 내가 정의한 red-500, red-550만 남게 된다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    /* extend: {
      colors: {
        red: {
          500: "#1bce61",
          550: "#111a31",
        },
      },
    }, */
    colors: {
      red: {
        500: "#1bce61",
        550: "#111a31",
      },
    },
  },
  plugins: [],
};

참고

본문에서는 커스텀 컬러에 대해 일부분만 다뤘다.
보다 자세한 내용이 필요한 경우 아래 링크에서 확인할 수 있다.
https://tailwindcss.com/docs/customizing-colors