Tailwind 는 다양한 기본 색상들을 제공한다.

하지만 프로젝트의 정해진 메인 색상이 있는 경우 등 커스텀 색상 팔레트를 만들어야 하는 경우, tailwind.config.js 를 수정하여 팔레트를 직접 구성할 수 있다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // 여기서 색상 팔레트를 구성하세요
    }
  }
}

사용자 정의 색상 정의하기

사용자 정의 색상 사용

• 기본 색상 팔레트를 완전히 사용자 정의 색상으로 교체하려면 config 파일의 theme.colors 섹션에 직접 색상을 추가하면 된다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

색상 객체 구문

• 동일한 색상의 여러 색조를 포함하는 경우 중첩된 색상 객체 구문을 사용하여 그룹화 할 수 있다.
  • 중첩된 키는 부모 키와 결합되어 bg-tahiti-400 와 같은 클래스 이름을 생성한다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },
      // ...
    },
  },
}

• 접미사 없이 값을 정의하고 싶을 때 DEFAULT 키를 사용할 수 있다.
  • 아래와 같이 작성하면 bg-tahiti 는 #06b6d4 를 나타낸다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // ...
      'tahiti': {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
  },
}

임의의 값

• 프로젝트에서 일회성 사용자 정의 색상이 필요한 경우에는 Tailwind의 임의 값 표기법을 사용하는 것이 좋다.

<button class="bg-[#1da1f2] text-white ...">
  <svg><!-- ... --></svg>
  Share on Twitter
</button>

기본 팔레트 색상 별칭

• 기본 팔레트를 그대로 사용하고 별칭만 변경하고 싶은 경우 tailwindcss/colors 를 구성파일에서 가져와서 별칭을 지정할 수도 있다.

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.slate,
      green: colors.emerald,
      purple: colors.violet,
      yellow: colors.amber,
      pink: colors.fuchsia,
    },
  },
}

기본 팔레트에 색상 추가

• 기본 팔레트에 덮어 쓰기가 아닌 추가를 하고 싶다면 config 파일의 theme.extend.colors 에 추가하면 된다.

module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          // ...
        },
      }
    },
  },
}

기본 값만으로 색조 팔레트 만들기 (Color Tone Map)

방법 1 - 색조 직접 입력

• primary 색상(#0d6efd) 을 추가한다고 해보자.
• 색조를 추가할 때 위에서 소개한 색상 객체 구문 방법을 사용할 경우, 각 색조마다의 색상 코드가 필요하다.
• https://uicolors.app/create 에서 기본 색상 코드를 입력하면 50 ~ 950 까지의 색상 코드를 알아낼 수 있다.

• Export 버튼을 누르면 Tailwind config 파일 형식에 맞게 json 코드도 제공한다.

• 500을 DEFAULT 로 설정한 최종 작성 코드는 아래와 같다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  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: {
        primary: {
          50: "#eef8ff",
          100: "#d8eeff",
          200: "#b9e0ff",
          300: "#89cfff",
          400: "#52b4ff",
          DEFAULT: "#2a91ff",
          600: "#0d6efd",
          700: "#0c5ae9",
          800: "#1149bc",
          900: "#144194",
          950: "#11295a",
        },
      },
    },
  },
  plugins: [],
};

• 플러그인도 잘 작동하는 것을 볼 수 있다.

방법 2 - nextcss/color-tools 라이브러리 사용

• nextcss/color-tools 패키지의 toneMap 함수는 입력받은 기본 색상에 대해 50 부터 950 까지 색조 코드 객체를 반환한다.

const Object = toneMap(hex: String);

import { toneMap } from "@nextcss/color-tools";

const tones = toneMap("#eee");
console.log(tones);
// Output → {
//   50: '#fdfdfd',
//   100: '#fcfcfc',
//   150: '#fbfbfb',
//   200: '#f9f9f9',
//   250: '#f7f7f7',
//   300: '#f5f5f5',
//   350: '#f3f3f3',
//   400: '#f1f1f1',
//   450: '#f0f0f0',
//   500: '#eeeeee',
//   550: '#d6d6d6',
//   600: '#bebebe',
//   650: '#a7a7a7',
//   700: '#8f8f8f',
//   750: '#777777',
//   800: '#5f5f5f',
//   850: '#474747',
//   900: '#303030',
//   950: '#242424',
// }

• 패키지 설치

npm i -D @nextcss/color-tools

• generateColors 함수 생성 및 적용
  • 코드가 더 깔끔해졌다!

/** @type {import('tailwindcss').Config} */

import { toneMap } from "@nextcss/color-tools";

function generateColors(color) {
  return {
    DEFAULT: color,
    ...toneMap(color),
  };
}

module.exports = {
  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: {
        primary: {
          ...generateColors("#2a91ff"),
        },
      },
    },
  },
  plugins: [],
};

• 부트스트랩 색상 팔레트를 추가하면 다음과 같다.

/** @type {import('tailwindcss').Config} */

import { toneMap } from "@nextcss/color-tools";

function generateColors(color) {
  return {
    DEFAULT: color,
    ...toneMap(color),
  };
}

module.exports = {
  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: {
        primary: {
          ...generateColors("#007bff"),
        },
        danger: {
          ...generateColors("#dc3545"),
        },
        secondary: {
          ...generateColors("#6c757d"),
        },
        success: {
          ...generateColors("#28a745"),
        },
        warning: {
          ...generateColors("#ffc107"),
        },
        info: {
          ...generateColors("#17a2b8"),
        },
        light: {
          ...generateColors("#f8f9fa"),
        },
        dark: {
          ...generateColors("#343a40"),
        },
      },
    },
  },
  plugins: [],
};

• 적용 확인

References

Customizing Colors - Tailwind CSS
GitHub - nextcss/color-tools: Useful color tools for your next JavaScript project.
tailwind css 똑똑하게 사용하기 - 이상원 기술 블로그