핵심 개념
테마 변수
디자인 토큰을 위한 API로 유틸리티 클래스 사용하기.
개요
Tailwind는 커스텀 디자인을 구축하기 위한 프레임워크입니다. 각기 다른 디자인은 서로 다른 타이포그래피, 색상, 그림자, 브레이크포인트 등을 필요로 합니다.
이러한 저수준 디자인 결정은 종종 디자인 토큰이라고 불립니다. Tailwind 프로젝트에서는 이러한 값을 테마 변수에 저장합니다.
테마 변수란 무엇인가요?
테마 변수는 @theme 지시어를 사용해 정의된 특별한 CSS 변수로, 프로젝트에 어떤 유틸리티 클래스가 존재할지 결정합니다.
예를 들어, --color-mint-500과 같은 테마 변수를 정의해 프로젝트에 새로운 색상을 추가할 수 있습니다:
@import "tailwindcss";@theme { --color-mint-500: oklch(0.72 0.11 178);}이제 HTML에서 bg-mint-500, text-mint-500, fill-mint-500과 같은 유틸리티 클래스를 사용할 수 있습니다:
<div class="bg-mint-500"> <!-- ... --></div>Tailwind는 테마 변수에 대해 일반 CSS 변수도 생성하므로, 임의의 값이나 인라인 스타일에서 디자인 토큰을 참조할 수 있습니다:
<div style="background-color: var(--color-mint-500)"> <!-- ... --></div>테마 변수가 다양한 유틸리티 클래스에 어떻게 매핑되는지 더 알아보려면 테마 변수 네임스페이스 문서를 참고하세요.
왜 @theme 대신 :root를 사용하지 않나요?
테마 변수는 단순한 CSS 변수가 아닙니다. 이 변수들은 Tailwind에게 새로운 유틸리티 클래스를 생성하도록 지시하는 역할도 합니다.
일반 CSS 변수보다 더 많은 기능을 하기 때문에, Tailwind는 테마 변수를 정의할 때 항상 명시적으로 작성하도록 특별한 구문을 사용합니다. 테마 변수는 최상위 레벨에서 정의되어야 하며, 다른 선택자나 미디어 쿼리 안에 중첩될 수 없습니다. 특별한 구문을 사용함으로써 이러한 규칙을 강제할 수 있습니다.
Tailwind 프로젝트에서 유틸리티 클래스와 연결되지 않는 변수를 정의하고 싶을 때는 여전히 :root를 사용하여 일반 CSS 변수를 정의할 수 있습니다. 디자인 토큰이 유틸리티 클래스에 직접 매핑되도록 하려면 @theme을 사용하고, 해당 유틸리티 클래스가 필요하지 않은 일반 CSS 변수를 정의할 때는 :root를 사용하세요.
유틸리티 클래스와의 관계
Tailwind의 flex나 object-cover와 같은 일부 유틸리티 클래스는 정적이며, 프로젝트마다 항상 동일하게 유지됩니다. 하지만 다른 많은 유틸리티 클래스들은 테마 변수에 의해 결정되며, 여러분이 정의한 테마 변수 때문에 존재합니다.
예를 들어, --font-* 네임스페이스에 정의된 테마 변수는 프로젝트에 존재하는 모든 font-family 유틸리티를 결정합니다:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ... */}font-sans, font-serif, font-mono 유틸리티는 기본적으로 Tailwind의 기본 테마가 --font-sans, --font-serif, --font-mono 테마 변수를 정의하기 때문에 존재합니다.
만약 --font-poppins와 같은 다른 테마 변수가 정의된다면, 이에 대응하는 font-poppins 유틸리티 클래스가 사용 가능해집니다:
@import "tailwindcss";@theme { --font-poppins: Poppins, sans-serif;}<h1 class="font-poppins">이 제목은 Poppins를 사용합니다.</h1>이러한 네임스페이스 내에서 테마 변수에 원하는 이름을 지정할 수 있으며, 그에 대응하는 동일한 이름의 유틸리티가 HTML에서 사용 가능해집니다.
변형과의 관계
일부 테마 변수는 유틸리티가 아닌 변형을 정의하는 데 사용됩니다. 예를 들어 --breakpoint-* 네임스페이스의 테마 변수는 프로젝트에서 어떤 반응형 브레이크포인트 변형이 존재하는지 결정합니다:
@import "tailwindcss";@theme { --breakpoint-3xl: 120rem;}이제 뷰포트가 120rem 이상일 때만 유틸리티를 트리거하는 3xl:* 변형을 사용할 수 있습니다:
<div class="3xl:grid-cols-6 grid grid-cols-2 md:grid-cols-4"> <!-- ... --></div>테마 변수가 다양한 유틸리티 클래스와 변형에 어떻게 매핑되는지 더 알아보려면 테마 변수 네임스페이스 문서를 참고하세요.
테마 변수 네임스페이스
테마 변수는 _네임스페이스_로 정의되며, 각 네임스페이스는 하나 이상의 유틸리티 클래스 또는 변형 API와 연결됩니다. 이러한 네임스페이스에 새로운 테마 변수를 정의하면 프로젝트에서 해당 유틸리티와 변형을 사용할 수 있습니다.
| 네임스페이스 | 유틸리티 클래스 |
|---|---|
--color-* | bg-red-500, text-sky-300 등의 색상 유틸리티 |
--font-* | font-sans와 같은 폰트 패밀리 유틸리티 |
--text-* | text-xl과 같은 폰트 크기 유틸리티 |
--font-weight-* | font-bold와 같은 폰트 두께 유틸리티 |
--tracking-* | tracking-wide와 같은 글자 간격 유틸리티 |
--leading-* | leading-tight와 같은 줄 간격 유틸리티 |
--breakpoint-* | sm:*와 같은 반응형 브레이크포인트 변형 |
--container-* | @sm:*와 같은 컨테이너 쿼리 변형 및 max-w-md와 같은 크기 유틸리티 |
--spacing-* | px-4, max-h-16 등의 간격 및 크기 유틸리티 |
--radius-* | rounded-sm와 같은 테두리 반경 유틸리티 |
--shadow-* | shadow-md와 같은 박스 그림자 유틸리티 |
--inset-shadow-* | inset-shadow-xs와 같은 내부 박스 그림자 유틸리티 |
--drop-shadow-* | drop-shadow-md와 같은 드롭 그림자 필터 유틸리티 |
--blur-* | blur-md와 같은 블러 필터 유틸리티 |
--perspective-* | perspective-near와 같은 원근감 유틸리티 |
--aspect-* | aspect-video와 같은 종횡비 유틸리티 |
--ease-* | ease-out와 같은 트랜지션 타이밍 함수 유틸리티 |
--animate-* | animate-spin와 같은 애니메이션 유틸리티 |
기본 테마 변수 목록은 기본 테마 변수 참조를 확인하세요.
기본 테마 변수
CSS 파일 상단에 tailwindcss를 임포트하면, 시작하기 위해 기본 테마 변수 세트가 포함됩니다.
tailwindcss를 임포트할 때 실제로 가져오는 내용은 다음과 같습니다:
@layer theme, base, components, utilities;@import "./theme.css" layer(theme);@import "./preflight.css" layer(base);@import "./utilities.css" layer(utilities);theme.css 파일에는 기본 색상 팔레트, 글꼴 크기, 그림자, 폰트 등이 포함되어 있습니다:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}이것이 바로 bg-red-200, font-serif, shadow-sm 같은 유틸리티가 기본적으로 제공되는 이유입니다. 이들은 flex-col이나 pointer-events-none처럼 프레임워크에 하드코딩된 것이 아니라, 기본 테마에 의해 구동됩니다.
기본 테마 변수의 전체 목록은 기본 테마 변수 참조를 확인하세요.
테마 커스텀하기
기본 테마 변수는 매우 일반적인 목적으로 설계되어 다양한 디자인을 구축하는 데 적합하지만, 이는 시작점일 뿐입니다. 여러분이 원하는 디자인을 정확히 구현하기 위해 색상 팔레트, 폰트, 그림자 등을 커스터마이징하는 것은 매우 일반적인 작업입니다.
기본 테마 확장하기
새로운 테마 변수를 정의하고 기본 테마를 확장하려면 @theme를 사용하세요:
@import "tailwindcss";@theme { --font-script: Great Vibes, cursive;}이렇게 하면 HTML에서 기본 font-sans나 font-mono 유틸리티처럼 사용할 수 있는 새로운 font-script 유틸리티 클래스가 생성됩니다:
<p class="font-script">이 텍스트는 Great Vibes 글꼴을 사용합니다.</p>테마 변수가 다양한 유틸리티 클래스와 변형에 어떻게 매핑되는지 더 알아보려면 테마 변수 네임스페이스 문서를 참고하세요.
기본 테마 재정의하기
@theme 내에서 기본 테마 변수 값을 재정의하여 변경할 수 있습니다:
@import "tailwindcss";@theme { --breakpoint-sm: 30rem;}이제 sm:* 변형은 기본값인 40rem 대신 30rem 뷰포트 크기에서 작동합니다:
<div class="grid grid-cols-1 sm:grid-cols-3"> <!-- ... --></div>기본 테마의 전체 네임스페이스를 완전히 재정의하려면 특수한 별표(*) 구문을 사용하여 해당 네임스페이스를 initial로 설정합니다:
@import "tailwindcss";@theme { --color-*: initial; --color-white: #fff; --color-purple: #3f3cbb; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;}이렇게 하면 해당 네임스페이스를 사용하는 모든 기본 유틸리티(예: bg-red-500)가 제거되고, 여러분이 정의한 커스텀 값(예: bg-midnight)만 사용할 수 있습니다.
테마 변수가 다양한 유틸리티 클래스 및 변형에 어떻게 매핑되는지 더 알아보려면 테마 변수 네임스페이스 문서를 참고하세요.
커스텀 테마 사용하기
기본 테마를 완전히 비활성화하고 커스텀 값만 사용하려면, 전역 테마 변수 네임스페이스를 initial로 설정하세요:
@import "tailwindcss";@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}이제 테마 변수에 의해 동작하는 기본 유틸리티 클래스는 사용할 수 없으며, font-body나 text-dusk와 같이 커스텀 테마 변수와 일치하는 유틸리티 클래스만 사용할 수 있습니다.
애니메이션 키프레임 정의
--animate-* 테마 변수에 대한 @keyframes 규칙을 @theme 내부에 정의하면, 커스텀 애니메이션 유틸리티가 실제로 사용될 때만 생성된 CSS에 포함됩니다:
@import "tailwindcss";@theme { --animate-fade-in-scale: fade-in-scale 0.3s ease-out; @keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }}커스텀 @keyframes 규칙을 항상 출력에 포함시키고 싶다면, @theme 외부에 정의하면 됩니다.
다른 변수 참조하기
테마 변수를 정의할 때 다른 변수를 참조하려면 inline 옵션을 사용하세요:
@import "tailwindcss";@theme inline { --font-sans: var(--font-inter);}inline 옵션을 사용하면 유틸리티 클래스가 실제 테마 변수를 참조하는 대신 테마 변수의 값을 사용합니다:
.font-sans { font-family: var(--font-inter);}inline을 사용하지 않으면 CSS에서 변수가 해석되는 방식 때문에 유틸리티 클래스가 예상치 못한 값으로 해석될 수 있습니다.
예를 들어, 아래 텍스트는 여러분이 예상한 대로 Inter를 사용하지 않고 sans-serif로 대체됩니다:
<div id="parent" style="--font-sans: var(--font-inter, sans-serif);"> <div id="child" style="--font-inter: Inter; font-family: var(--font-sans);"> 이 텍스트는 Inter가 아닌 sans-serif 폰트를 사용합니다. </div></div>이런 현상이 발생하는 이유는 var(--font-sans)가 --font-sans가 정의된 위치(#parent)에서 해석되기 때문입니다. --font-inter는 트리에서 더 깊은 위치(#child)에 정의되어 있기 때문에 해당 위치에서는 값이 없습니다.
프로젝트 간 공유
테마 변수는 CSS로 정의되기 때문에, 여러 프로젝트에서 공유하려면 해당 변수들을 별도의 CSS 파일로 분리한 후 각 프로젝트에서 불러오기만 하면 됩니다.
@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}그런 다음 @import를 사용해 다른 프로젝트에서 테마 변수를 불러올 수 있습니다.
@import "tailwindcss";@import "../brand/theme.css";이렇게 공유 테마 변수는 모노레포 설정에서 별도의 패키지로 관리하거나, NPM에 배포해 다른 서드파티 CSS 파일처럼 불러올 수도 있습니다.
테마 변수 사용하기
여러분의 테마 변수들은 CSS를 컴파일할 때 일반 CSS 변수로 변환됩니다:
:root { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}이렇게 하면 커스텀 CSS나 인라인 스타일에서 디자인 토큰을 쉽게 참조할 수 있습니다.
커스텀 CSS 사용하기
같은 값을 사용해야 하는 커스텀 CSS를 작성할 때, 여러분의 테마 변수를 활용하여 디자인 토큰에 접근할 수 있습니다:
@import "tailwindcss";@layer components { .typography { p { font-size: var(--text-base); color: var(--color-gray-700); } h1 { font-size: var(--text-2xl--line-height); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } h2 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } }}이 방법은 데이터베이스나 API에서 가져온 마크다운 콘텐츠를 HTML로 렌더링할 때처럼, 여러분이 직접 제어하지 않는 HTML을 스타일링할 때 특히 유용합니다.
임의 값 사용하기
테마 변수를 임의 값과 함께 사용하면 유용합니다. 특히 calc() 함수와 조합할 때 더욱 그렇습니다.
<div class="relative rounded-xl"> <div class="absolute inset-px rounded-[calc(var(--radius-xl)-1px)]"> <!-- ... --> </div> <!-- ... --></div>위 예제에서는 중첩된 inset 엘리먼트에서 --radius-xl 값에서 1px을 빼서 동심원 형태의 테두리 반경을 만들었습니다.
자바스크립트에서 참조하기
대부분의 경우, 자바스크립트에서 테마 변수를 참조해야 할 때는 다른 CSS 값과 마찬가지로 CSS 변수를 직접 사용할 수 있습니다.
예를 들어, React에서 인기 있는 Motion 라이브러리는 CSS 변수 값으로 애니메이션을 적용할 수 있게 해줍니다:
<motion.div animate={{ backgroundColor: "var(--color-blue-500)" }} />만약 자바스크립트에서 해석된 CSS 변수 값에 접근해야 한다면, getComputedStyle을 사용하여 문서 루트에서 테마 변수의 값을 가져올 수 있습니다:
let styles = getComputedStyle(document.documentElement);let shadow = styles.getPropertyValue("--shadow-xl");기본 테마 변수 참조
참고로, Tailwind CSS를 프로젝트에 임포트할 때 기본적으로 포함되는 테마 변수의 전체 목록은 다음과 같습니다:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); --color-red-300: oklch(0.808 0.114 19.571); --color-red-400: oklch(0.704 0.191 22.216); --color-red-500: oklch(0.637 0.237 25.331); --color-red-600: oklch(0.577 0.245 27.325); --color-red-700: oklch(0.505 0.213 27.518); --color-red-800: oklch(0.444 0.177 26.899); --color-red-900: oklch(0.396 0.141 25.723); --color-red-950: oklch(0.258 0.092 26.042); --color-orange-50: oklch(0.98 0.016 73.684); --color-orange-100: oklch(0.954 0.038 75.164); --color-orange-200: oklch(0.901 0.076 70.697); --color-orange-300: oklch(0.837 0.128 66.29); --color-orange-400: oklch(0.75 0.183 55.934); --color-orange-500: oklch(0.705 0.213 47.604); --color-orange-600: oklch(0.646 0.222 41.116); --color-orange-700: oklch(0.553 0.195 38.402); --color-orange-800: oklch(0.47 0.157 37.304); --color-orange-900: oklch(0.408 0.123 38.172); --color-orange-950: oklch(0.266 0.079 36.259); --color-amber-50: oklch(0.987 0.022 95.277); --color-amber-100: oklch(0.962 0.059 95.617); --color-amber-200: oklch(0.924 0.12 95.746); --color-amber-300: oklch(0.879 0.169 91.605); --color-amber-400: oklch(0.828 0.189 84.429); --color-amber-500: oklch(0.769 0.188 70.08); --color-amber-600: oklch(0.666 0.179 58.318); --color-amber-700: oklch(0.555 0.163 48.998); --color-amber-800: oklch(0.473 0.137 46.201); --color-amber-900: oklch(0.414 0.112 45.904); --color-amber-950: oklch(0.279 0.077 45.635); --color-yellow-50: oklch(0.987 0.026 102.212); --color-yellow-100: oklch(0.973 0.071 103.193); --color-yellow-200: oklch(0.945 0.129 101.54); --color-yellow-300: oklch(0.905 0.182 98.111); --color-yellow-400: oklch(0.852 0.199 91.936); --color-yellow-500: oklch(0.795 0.184 86.047); --color-yellow-600: oklch(0.681 0.162 75.834); --color-yellow-700: oklch(0.554 0.135 66.442); --color-yellow-800: oklch(0.476 0.114 61.907); --color-yellow-900: oklch(0.421 0.095 57.708); --color-yellow-950: oklch(0.286 0.066 53.813); --color-lime-50: oklch(0.986 0.031 120.757); --color-lime-100: oklch(0.967 0.067 122.328); --color-lime-200: oklch(0.938 0.127 124.321); --color-lime-300: oklch(0.897 0.196 126.665); --color-lime-400: oklch(0.841 0.238 128.85); --color-lime-500: oklch(0.768 0.233 130.85); --color-lime-600: oklch(0.648 0.2 131.684); --color-lime-700: oklch(0.532 0.157 131.589); --color-lime-800: oklch(0.453 0.124 130.933); --color-lime-900: oklch(0.405 0.101 131.063); --color-lime-950: oklch(0.274 0.072 132.109); --color-green-50: oklch(0.982 0.018 155.826); --color-green-100: oklch(0.962 0.044 156.743); --color-green-200: oklch(0.925 0.084 155.995); --color-green-300: oklch(0.871 0.15 154.449); --color-green-400: oklch(0.792 0.209 151.711); --color-green-500: oklch(0.723 0.219 149.579); --color-green-600: oklch(0.627 0.194 149.214); --color-green-700: oklch(0.527 0.154 150.069); --color-green-800: oklch(0.448 0.119 151.328); --color-green-900: oklch(0.393 0.095 152.535); --color-green-950: oklch(0.266 0.065 152.934); --color-emerald-50: oklch(0.979 0.021 166.113); --color-emerald-100: oklch(0.95 0.052 163.051); --color-emerald-200: oklch(0.905 0.093 164.15); --color-emerald-300: oklch(0.845 0.143 164.978); --color-emerald-400: oklch(0.765 0.177 163.223); --color-emerald-500: oklch(0.696 0.17 162.48); --color-emerald-600: oklch(0.596 0.145 163.225); --color-emerald-700: oklch(0.508 0.118 165.612); --color-emerald-800: oklch(0.432 0.095 166.913); --color-emerald-900: oklch(0.378 0.077 168.94); --color-emerald-950: oklch(0.262 0.051 172.552); --color-teal-50: oklch(0.984 0.014 180.72); --color-teal-100: oklch(0.953 0.051 180.801); --color-teal-200: oklch(0.91 0.096 180.426); --color-teal-300: oklch(0.855 0.138 181.071); --color-teal-400: oklch(0.777 0.152 181.912); --color-teal-500: oklch(0.704 0.14 182.503); --color-teal-600: oklch(0.6 0.118 184.704); --color-teal-700: oklch(0.511 0.096 186.391); --color-teal-800: oklch(0.437 0.078 188.216); --color-teal-900: oklch(0.386 0.063 188.416); --color-teal-950: oklch(0.277 0.046 192.524); --color-cyan-50: oklch(0.984 0.019 200.873); --color-cyan-100: oklch(0.956 0.045 203.388); --color-cyan-200: oklch(0.917 0.08 205.041); --color-cyan-300: oklch(0.865 0.127 207.078); --color-cyan-400: oklch(0.789 0.154 211.53); --color-cyan-500: oklch(0.715 0.143 215.221); --color-cyan-600: oklch(0.609 0.126 221.723); --color-cyan-700: oklch(0.52 0.105 223.128); --color-cyan-800: oklch(0.45 0.085 224.283); --color-cyan-900: oklch(0.398 0.07 227.392); --color-cyan-950: oklch(0.302 0.056 229.695); --color-sky-50: oklch(0.977 0.013 236.62); --color-sky-100: oklch(0.951 0.026 236.824); --color-sky-200: oklch(0.901 0.058 230.902); --color-sky-300: oklch(0.828 0.111 230.318); --color-sky-400: oklch(0.746 0.16 232.661); --color-sky-500: oklch(0.685 0.169 237.323); --color-sky-600: oklch(0.588 0.158 241.966); --color-sky-700: oklch(0.5 0.134 242.749); --color-sky-800: oklch(0.443 0.11 240.79); --color-sky-900: oklch(0.391 0.09 240.876); --color-sky-950: oklch(0.293 0.066 243.157); --color-blue-50: oklch(0.97 0.014 254.604); --color-blue-100: oklch(0.932 0.032 255.585); --color-blue-200: oklch(0.882 0.059 254.128); --color-blue-300: oklch(0.809 0.105 251.813); --color-blue-400: oklch(0.707 0.165 254.624); --color-blue-500: oklch(0.623 0.214 259.815); --color-blue-600: oklch(0.546 0.245 262.881); --color-blue-700: oklch(0.488 0.243 264.376); --color-blue-800: oklch(0.424 0.199 265.638); --color-blue-900: oklch(0.379 0.146 265.522); --color-blue-950: oklch(0.282 0.091 267.935); --color-indigo-50: oklch(0.962 0.018 272.314); --color-indigo-100: oklch(0.93 0.034 272.788); --color-indigo-200: oklch(0.87 0.065 274.039); --color-indigo-300: oklch(0.785 0.115 274.713); --color-indigo-400: oklch(0.673 0.182 276.935); --color-indigo-500: oklch(0.585 0.233 277.117); --color-indigo-600: oklch(0.511 0.262 276.966); --color-indigo-700: oklch(0.457 0.24 277.023); --color-indigo-800: oklch(0.398 0.195 277.366); --color-indigo-900: oklch(0.359 0.144 278.697); --color-indigo-950: oklch(0.257 0.09 281.288); --color-violet-50: oklch(0.969 0.016 293.756); --color-violet-100: oklch(0.943 0.029 294.588); --color-violet-200: oklch(0.894 0.057 293.283); --color-violet-300: oklch(0.811 0.111 293.571); --color-violet-400: oklch(0.702 0.183 293.541); --color-violet-500: oklch(0.606 0.25 292.717); --color-violet-600: oklch(0.541 0.281 293.009); --color-violet-700: oklch(0.491 0.27 292.581); --color-violet-800: oklch(0.432 0.232 292.759); --color-violet-900: oklch(0.38 0.189 293.745); --color-violet-950: oklch(0.283 0.141 291.089); --color-purple-50: oklch(0.977 0.014 308.299); --color-purple-100: oklch(0.946 0.033 307.174); --color-purple-200: oklch(0.902 0.063 306.703); --color-purple-300: oklch(0.827 0.119 306.383); --color-purple-400: oklch(0.714 0.203 305.504); --color-purple-500: oklch(0.627 0.265 303.9); --color-purple-600: oklch(0.558 0.288 302.321); --color-purple-700: oklch(0.496 0.265 301.924); --color-purple-800: oklch(0.438 0.218 303.724); --color-purple-900: oklch(0.381 0.176 304.987); --color-purple-950: oklch(0.291 0.149 302.717); --color-fuchsia-50: oklch(0.977 0.017 320.058); --color-fuchsia-100: oklch(0.952 0.037 318.852); --color-fuchsia-200: oklch(0.903 0.076 319.62); --color-fuchsia-300: oklch(0.833 0.145 321.434); --color-fuchsia-400: oklch(0.74 0.238 322.16); --color-fuchsia-500: oklch(0.667 0.295 322.15); --color-fuchsia-600: oklch(0.591 0.293 322.896); --color-fuchsia-700: oklch(0.518 0.253 323.949); --color-fuchsia-800: oklch(0.452 0.211 324.591); --color-fuchsia-900: oklch(0.401 0.17 325.612); --color-fuchsia-950: oklch