tailwind css v4 에서 색상 관련해서

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

shadcn/ui 설치 (wit Layout UI)

작성

313

안녕하세요. 강사님.

tailwind v4에서 hsl 대신 oklch를 사용한다고 하는데,,, 이에 대한 안내도 있을까요?

아직 강의를 다 들은건 아니라서 커스텀 색상을 얼마나 추가할지는 모르겠는데 혹시 몰라서요!

react 블로그 next.js cursor cursorai

답변 2

짐코딩

지식공유자

안녕하세요 🙂

해당 강의에서는 Tailwind CSS 스펙을 자세히 다루고 있지는 않지만, OKLCH 관련해서 답글로 안내해 드리겠습니다!

현대화된 P3 컬러 팔레트

Tailwind CSS v4에서는 기본 색상 팔레트 전체를 RGB에서 OKLCH로 업그레이드했습니다. 이는 이전에 sRGB 색상 공간으로 제한되었던 부분에서 벗어나 더 넓은 색 영역을 활용하여 색상을 더 생생하게 만들었습니다.

OKLCH 활용 예시

Tailwind CSS v4에서는 새로운 @theme 지시문을 통해 OKLCH 색상을 쉽게 정의할 수 있습니다:

@import 'tailwindcss';

@theme {
  --color-ocean-600: oklch(0.65 0.18 220);
  --color-sunrise: oklch(0.88 0.12 80);
}

body {
  background-color: theme(colors.white);
  color: theme(colors.gray.900);
}

컴포넌트에서는 다음과 같이 사용할 수 있습니다:

function Dashboard() {
  return (
    <section className='grid gap-6 p-8 max-w-5xl mx-auto'>
      <header className='rounded-lg p-4 bg-ocean-600'>
        <h2 className='font-bold text-xl text-sunrise'>대시보드</h2>
      </header>
    </section>
  );
}

그리고 Tailwind CSS 강의 교안 하단에 TailwindCSS v4 새로운 버전에 대한 변경사항을 정리해 두었으니 참고하시면 도움이 되실 거예요.

마지막으로 새롭게 추가한 회차 "Next.js 업그레이드 & Changelog"가 있는데요, 해당 회차 후반부에서 간단히 Shadcn UI에 새롭게 변경된 테마(OKLCH 기반)를 적용하는 방법을 간략히 설명드려요 🙂

수강 중에 또 궁금한 사항이 있으시면 언제든 문의주세요! 💪

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. jjanec님.

Tailwind CSS v4에서는 색상 정의 방식으로 oklch를 지원하게 되었습니다. OKLCH는 색상을 정의하는 새로운 방식으로, 색상을 보다 직관적으로 관리할 수 있다는 장점이 있습니다.

먼저, Tailwind CSS의 설정 파일 (tailwind.config.js)에서 theme.extend.colors 섹션을 사용하여 OKLCH 색상을 추가할 수 있습니다. 여기서 OKLCH는 색상 공간을 나타내는 것으로, 표시되는 색상 변화에 따른 명도와 채도의 조절이 가능합니다. 예를 들어:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': 'oklch(50% 0.5 233)',
        'custom-pink': 'oklch(54% 0.3 345)',
      },
    },
  },
}

이러한 설정을 통해 자신만의 커스텀 색상을 추가할 수 있고, 이를 간결하고 유연하게 조정할 수 있습니다. OKLCH 방식은 기존보다 색상 변화와 일관성을 유지하기 용이하므로, 색상 관리에 있어 보다 정교한 제어가 가능해집니다.

추가적으로, Tailwind CSS의 각종 유틸리티를 통해 색상도 쉽게 커스터마이즈할 수 있으니, 강의에서 혹은 공식문서를 참고하셔서 활용해 보시기 바랍니다.

Tailwind CSS의 새로운 색상 시스템에 대한 보다 자세한 내용이 필요하시다면, 관련 스레드나 공식 문서 링크에서 더 많은 정보를 얻을 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변