개발자

next중인데 질문있습니다!

4월 1일조회 37

사드씨엔 설치하니깐 컬러관련 테마 이런 건 생겼는데 text-body-02이런 것 처럼 최적화하는 것도 하고싶습니다! 근데 전혀 모르겠어여 ㅠㅠ

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

조세영님의 프로필 사진

next.js 15버전 이상 사용하시면 globals.css에서 root 선택자에 그대로 css변수 정의하시면 됩니다. 14버전 이하라면 tailwind.config.js 파일에 정의하실 수 있습니다. shadcn ui 공식문서와 tailwindcss 공식문서에 잘 나와있을거에요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

4월 1일

사용하고 계신 사드(Sass)에서는 별도의 변수 설정을 통해 원하는 색상 값들을 관리하고 사용할 수 있습니다. 예를 들어, 아래와 같이 개별 RGBA 색상값 또는 HEX 색상 코드를 변수로 설정하고 이를 필요한 곳에서 사용할 수 있습니다. ``` $color-primary: #63B3ED; // 기본 색상 $color-secondary: #2D3748; // 보조 색상 $text-color: #4A5568; // 기본 텍스트 색상 $body-bg: #F7FAFC; // 배경색 body { color: $text-color; background-color: $body-bg; } ``` 테마 컬러 등을 미리 정의해두면 전체적인 디자인 일관성 유지에 도움이 됩니다. 위와 같은 방식으로 'text-body-02' 같은 이름의 여러 개의 text color를 선언하고 필요할 때 해당 변수를 호출해서 사용하는 방식으로 진행하세요. 약간 더 복잡한 경우라면, 함수나 Mixin 등을 이용하여 반복되는 스타일 요소들을 재활용할 수 있는 방법도 시도해보시길 바랍니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!