- Customization
- Customizing Colors
Customization
Customizing Colors
Customizing the default color palette for your project.
색상 커스터마이징
여러분의 프로젝트에 맞게 기본 색상 팔레트를 커스터마이징하는 방법을 알아보겠습니다.
기본 색상 팔레트
Tailwind는 특별한 브랜딩을 고려하지 않아도 바로 사용할 수 있는 전문적으로 설계된 기본 색상 팔레트를 제공합니다.
하지만 색상 팔레트를 커스터마이징해야 한다면, tailwind.config.js 파일의 theme 섹션에서 colors 키 아래에 색상을 설정할 수 있습니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// 여기에 색상 팔레트를 설정하세요
}
}
}커스텀 색상 팔레트를 만들 때는, 원하는 색상을 정확히 알고 있다면 커스텀 색상 설정을 통해 처음부터 직접 구성하거나, 빠르게 시작하고 싶다면 기본 색상 팔레트에서 색상을 골라 사용할 수 있습니다.
커스텀 색상 사용하기
기본 색상 팔레트를 완전히 커스텀 색상으로 대체하고 싶다면, 설정 파일의 theme.colors 섹션 아래에 직접 색상을 추가하세요:
/** @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',
},
},
}기본적으로 이 색상들은 텍스트 색상 유틸리티, 테두리 색상 유틸리티, 배경 색상 유틸리티 등 색상을 사용하는 모든 곳에서 사용할 수 있습니다.
<div class="bg-midnight text-tahiti">
<!-- ... -->
</div>프로젝트에서 transparent나 currentColor와 같은 값을 사용하려면 이 값들을 포함하는 것을 잊지 마세요.
색상 객체 문법
팔레트에 동일한 색상의 여러 색조가 포함된 경우, 중첩된 색상 객체 문법을 사용하여 그룹화하면 편리합니다:
/** @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',
},
// ...
},
},
}중첩된 키는 부모 키와 결합되어 bg-tahiti-400과 같은 클래스 이름을 생성합니다.
Tailwind의 다른 많은 부분과 마찬가지로, 접미사 없이 값을 정의하고 싶을 때 특별한 DEFAULT 키를 사용할 수 있습니다:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// ...
'tahiti': {
light: '#67e8f9',
DEFAULT: '#06b6d4',
dark: '#0e7490',
},
// ...
},
},
}이렇게 하면 bg-tahiti, bg-tahiti-light, bg-tahiti-dark와 같은 클래스가 생성됩니다.
임의 값 사용하기
프로젝트에서 일회성 커스텀 색상이 필요하다면, 테마에 추가하는 대신 Tailwind의 임의 값 표기법을 사용하여 해당 색상에 대한 클래스를 즉석에서 생성할 수 있습니다.
<button class="bg-[#1da1f2] text-white ...">
<svg><!-- ... --></svg>
Share on Twitter
</button>더 자세한 내용은 임의 값 사용하기 문서를 참고하세요.
색상 생성하기
Tailwind의 기본 색상 50~950 단계가 어떻게 자동으로 생성되었는지 궁금하다면, 안타깝게도 색상은 복잡한 주제입니다. 최상의 결과를 얻기 위해 우리는 Tailwind의 기본 색상을 수작업으로 직접 선택했습니다. 각 색상을 눈으로 꼼꼼히 조정하고 실제 디자인에서 테스트하여 만족스러운 결과를 얻을 때까지 작업했습니다.
만약 여러분이 직접 커스텀 색상 팔레트를 만들고 싶지만 수작업으로 진행하는 데 자신이 없다면, UI Colors를 추천합니다. 이 도구는 원하는 색상을 기반으로 좋은 출발점을 제공해줍니다.
또한 팔레트를 만드는 데 유용한 두 가지 도구는 Palettte와 ColorBox입니다. 이 도구들은 작업을 대신해주지는 않지만, 이러한 작업을 위한 인터페이스가 잘 설계되어 있습니다.
기본 색상 사용하기
프로젝트에 완전히 커스텀한 색상 세트가 정해져 있지 않다면, tailwindcss/colors를 설정 파일에서 불러와 기본 색상 팔레트에서 원하는 색상을 선택할 수 있습니다.
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
},
},
}이 방법은 색상 팔레트를 의도적으로 제한하고 IntelliSense가 제안하는 클래스 이름의 수를 줄이고 싶을 때 유용합니다.
색상 이름 별칭 지정하기
기본 색상 팔레트의 이름을 더 간단하고 기억하기 쉽게 별칭으로 지정할 수 있습니다:
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,
},
},
}
이 방법은 특히 회색 계열에서 자주 사용됩니다. 일반적으로 하나의 프로젝트에서는 한 가지 회색 계열만 사용하므로, 예를 들어 bg-neutral-300 대신 bg-gray-300을 입력할 수 있도록 하는 것이 편리합니다.
추가 색상 적용하기
기본 색상 팔레트에 새로운 색상을 추가하려면 설정 파일의 theme.extend.colors 섹션에 추가하면 됩니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
brown: {
50: '#fdf8f6',
100: '#f2e8e5',
200: '#eaddd7',
300: '#e0cec7',
400: '#d2bab0',
500: '#bfa094',
600: '#a18072',
700: '#977669',
800: '#846358',
900: '#43302b',
},
}
},
},
}또한 디자인에 필요한 경우 기존 색상에 추가 색조를 적용할 수도 있습니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
blue: {
950: '#17275c',
},
}
},
},
}기본 색상 비활성화하기
기본 색상 중 일부를 비활성화하려면, 기본 색상 팔레트를 재정의하고 원하는 색상만 포함시키는 것이 가장 좋은 방법입니다:
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
},
},
}색상 이름 지정하기
Tailwind는 기본적으로 리터럴 색상 이름(예: 빨강, 초록 등)과 숫자 스케일(50은 밝고 900은 어둡게)을 사용합니다. 우리는 이 방식이 대부분의 프로젝트에 가장 적합하며, primary나 danger와 같은 추상적인 이름을 사용하는 것보다 유지보수가 더 쉽다고 생각합니다.
그렇지만, Tailwind에서 색상 이름을 원하는 대로 지정할 수 있습니다. 예를 들어, 여러 테마를 지원해야 하는 프로젝트를 작업 중이라면, 더 추상적인 이름을 사용하는 것이 합리적일 수 있습니다:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
primary: '#5c6ac4',
secondary: '#ecc94b',
// ...
}
}
}위와 같이 색상을 명시적으로 구성할 수도 있고, 기본 색상 팔레트에서 색상을 가져와 별칭을 지정할 수도 있습니다:
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
primary: colors.indigo,
secondary: colors.yellow,
neutral: colors.gray,
}
}
}다시 말하지만, 대부분의 프로젝트에서는 기본 명명 규칙을 따르는 것을 권장하며, 정말 특별한 이유가 있는 경우에만 추상적인 이름을 사용하는 것이 좋습니다.
CSS 변수 사용하기
CSS 변수로 색상을 정의하고 싶다면, 투명도 조정 문법과 함께 사용하려면 색상 _채널_만 변수로 정의해야 합니다.
CSS 변수를 색상 공간 함수 없이 채널로 정의하세요
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-primary: 255 115 179;
--color-secondary: 111 114 185;
/* ... */
}
}
색상 공간 함수를 포함하지 마세요. 그렇지 않으면 투명도 조정이 작동하지 않습니다
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-primary: rgb(255 115 179);
--color-secondary: rgb(111 114 185);
/* ... */
}
}
그런 다음 설정 파일에서 색상을 정의할 때, 사용하는 색상 공간과 rgba와 같이 알파 채널이 필요한 색상 공간의 기본 알파 값을 포함해야 합니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// 모던 `rgb` 사용
primary: 'rgb(var(--color-primary))',
secondary: 'rgb(var(--color-secondary))',
// 모던 `hsl` 사용
primary: 'hsl(var(--color-primary))',
secondary: 'hsl(var(--color-secondary))',
// 레거시 `rgba` 사용
primary: 'rgba(var(--color-primary), 1)',
secondary: 'rgba(var(--color-secondary), 1)',
}
}
}이 방식으로 색상을 정의할 때, 사용하는 색상 함수에 맞게 CSS 변수의 형식이 올바른지 확인해야 합니다. 모던 공백으로 구분된 문법을 사용한다면 공백을 사용하고, rgba나 hsla 같은 레거시 함수를 사용한다면 쉼표를 사용해야 합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* rgb(255 115 179 / 1) 용 */
--color-primary: 255 115 179;
/* hsl(333deg 100% 73% / 1) 용 */
--color-primary: 333deg 100% 73%;
/* rgba(255, 115, 179, 1) 용 */
--color-primary: 255, 115, 179;
}
}