색깔 적용 안됨

최근에 지인들과 새로운 프로젝트를 진행하기로 했다. (Next.js와 Tailwind css를 사용)

오늘은 프로젝트에서 발생했던 문제와 내가 시도 했던 방법들을 공유하고자 한다.

 

 

문제 발생

Tailwind css를 사용했는데 다른 거 다 되는데 색깔만 적용되지 않는 문제가 발생했다. (폰트, 배경 등)

 

1차 해결 방법

구글의 도움 받아 1차 해결 방법을 찾았다.

바로 @layer를 사용해 색깔을 정의하는 방법이다. 

@layer {
	.text-white {
		color: white;
	}
}

.title_section {
    @apply flex flex-col p-[30px] font-bold text-5xl text-white;
}

 

하지만 이 방법을 적용한 뒤에 글자 색깔을 바꿀 수 있었지만, 혼자 생각해봤을 때 올바른 방법이 아니라고 판단했다.

 

색 변경은 css에서 기본적이고, 필수적인 기능 중 하나인데 Tailwind css에서 이것을 지원하지 않는다는게 말이 되지 않았기 때문이다.

 

 

2차 해결 방법

그래서 두 번째 방법을 찾았다. (이 방법이 정답!)

바로 tailwind.config.ts을 설정하는 거다.

 

이 방법은 개인적으로 알고 지내는 분이 알려주셨는데 내 얘기를 듣고 "왠지 설정 파일이 잘못되어 있을 거 같은데..?"라고 하셔서 확인해봤더니...ㅎㅎ 다른 팀원이 실수로 해당 파일을 잘못 설정했었던 것이었다. 

 

커스텀 색깔을 정의하셨는데 위치가 잘못되어 있었다.

theme에 바로 color를 넣게 되면 기존 Tailwind css에서 제공해주는 색상을 안쓰겠다는 의미!

수정 전

 

그래서 아래와 같이 바꿔주었다.

수정 후

다행히 위에처럼 변경했더니 색깔이 잘 적용되기 시작했다 ㅎㅎ