[CSS] Tailwindcss에 색상 커스터마이징하기

프로젝트를 진행할 때 자주 사용하게 되는 색들이 있다. 그것들을 항상 헥사코드를 찾아서 작성하기에는 너무 힘들다. 따라서 tailwind css에서는 기본으로 주어진 색상처럼 사용할 수 있도록 커스터마이징할 수 있는 기능을 지원한다.

 

먼저 `tailwind.config.ts` 파일에 들어가보자. 그러면 얼추 아래와 같은 세팅이 작성되어 있다. (나는 create-next-app을 통해 Next.js의 App router를 사용하고 tailwind를 사용한다고 설정했으므로 자동으로 content를 작성해주었다.)

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
};
export default config;

 

여기서 `content`는 해당 root에서부터 해당 경로에, 해당 확장자로 작성된 파일에 tailwindcss를 적용한다는 것이다. 만약 `./src/myComponents`라는 폴더를 만들고 하위 컴포넌트에 tailwind css를 사용해도 제대로 적용되지 않는 것을 확인할 수있을 것이다.

 

색상 커스터마이징에서 접근해야하는 부분은 `theme` 부분이다. 위 파일을 보면 `theme` 내부에 `extend`가 있고, 그 내부에 `colors`가 있는데, `colors`가 `extend` 외부에 병렬로 존재할 수도 있다.

 

1. 컬러 팔레트 만들기

`theme` 내부에 `colors`가 있다면 기본 테마 위에 재정의할 수 있다. Tailwindcss에서 기본적으로 제공하는 컬러 팔레트가 있는데, 이 링크에 들어가보면 확인할 수 있다. 우리가 `text-gray-500`으로 아무 세팅 없이 사용하면 tailwindcss에서 제공하는 gray-500 색상이 적용된다. 그런데, 똑같이 gray-500을 사용하면서 다른 색상을 사용하고 싶은 경우에는 어떻게 하면 될까? 아래와 같이 작성하면 된다.

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    colors: {
      gray: {
        30: "#F2F2F2",
        50: "#E3E3E3",
        100: "#D9D9D9",
        200: "#C9C9C9",
        300: "#B0B0B0",
        400: "#969696",
        500: "#7D7D7D",
        600: "#636363",
        700: "#4A4A4A",
        800: "#303030",
        900: "#171717"
      }
    },
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)"
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)"
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
};
export default config;

 

직접 확인해보면 좀 더 푸른색 기운이 덜해진 회색으로 바뀐 것을 알 수 있다. 위에 작성한 `gray: {...}`를 `extend` 내부의 `colors`에 추가해도 된다. 이 둘의 차이점은 `extend`내부에서는 default 값에 접근할 수 있다는 것이다. `colors.gray`를 사용하면 기본 gray 색상에 접근할 수 있다. gray 대신에 pink, blue, mycolor 등 본인이 사용하고 싶은 이름으로 대신해서 마찬가지 방법으로 사용할 수 있다.

 

 

2. 커스텀 색상 만들기

이번엔 경고, 확인과 같은 특정한 이름으로 색상을 지정하는 방법에 대해 알아보려고 한다. 위와 비슷한데, 객체가 들어가는 것이 아니라 헥사코드만 입력하면 된다.

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        negative: "#FF4737",
        notice: "#FF961E",
        positive: "#008F5D",
        informative: "#248DFF"
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)"
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
};
export default config;

 

이번엔 `extend` 내부 `colors`에 작성했다. 사용 방법은 똑같다. `bg-negative`라고 하면 다홍색 바탕이 적용된다. `extend` 내부에 작성하는 경우, 기본값과 중복되면 안되므로 이름을 정할 때 주의해야 한다.

 

하지만 굳이 꼭 gray와 같은 기본값과 중복된 이름을 `extend` 내부에 사용해야한다면 tailwindcss에서 알아서 새로운 값으로 잘 대체해준다. 하지만 `extend` 외부에 정의한 것과 달리 재정의가 아닌 확장한 것으로 인식하므로 잘못 사용하면 뜻대로 적용되지 않을 수 있다.

 

---

Customizing Colors - Tailwind CSS