[KTB 파이널 프로젝트 트러블 슈팅] 헬퍼텍스트 색상 변경 안 되는 문제 - Tailwind CSS

☄️ 문제 상황

 

로그인 폼에서 헬퍼 텍스트 색상이 동적으로 변환되지 않는 문제가 발생했다.

유효하지 않은 입력인 경우에, 헬퍼 텍스트의 색상을 빨간색으로 변경하고 싶었는데 색상 변경이 되지 않았다.

 

 

☄️ 문제 원인

 

Tailwind CSS로 색상을 지정할 때, 색상 이름 뒤에 숫자(ex. -500, -700)를 붙여야 한다.

색상 이름만 지정하고, 숫자를 붙이지 않아서 발생한 문제였다.

 

 

☄️ 해결 방법

 

1. Tailwind CSS의 색상 규칙 이해

 

색상 지정 시, 반드시 색상-숫자 형식을 사용해야 한다. (ex. red-500)

숫자는 색상의 밝기를 나타내며, 50에서 900까지의 숫자를 지정해 줄 수 있다. 숫자가 높을수록 어두운 색상이다.

 

 

2. 숫자 추가

 

원하는 밝기의 숫자를 넣어준다. (ex. text-red-500)

 

cf) 밝기 비교 예시

좌: text-red-300 / 우: text-red-700

 

☄️ 결과

 

변경 전 코드

<p className="text-red">

 

변경 후 코드

<p className="text-red-500">

 

코드 변경 전/후 결과

헬퍼 텍스트 색상 변경 완료!

 

 

 

☄️ 참고

 

색상마다 지원하는 숫자가 다르다.

Tailwind CSS 색상 팔레트를 참고하는 것도 좋다!

https://tailwindcss.com/docs/customizing-colors

Customizing Colors - Tailwind CSS

 

HEX 색상 코드를 사용해 직접 원하는 색을 지정해주고 싶다면 다음과 같이 설정해 주면 된다.

<p className="text-[#EEEEFF]">

 

 

 

📎 Tailwind CSS를 처음 사용해 보아서, 문법에 익숙하지 않아 발생한 사소한 문제였다.