[CSS/React] tailwind 조건부 스타일링

 

 

💡 tailwind.. 조건에 따라 스타일링이 가능했다..

 

문제 풀기 기능 구현 중 채점 후에

사용자의 답이 정답이라면 파란색으로, 오답이라면 빨간색으로 표시를 해줘야 했다!

 

그래서 같은 태그(컬러만 다르게 준)를 두 개 두고 정답/오답에 따라 보이게 해야 하나? 하다가

tailwind 조건부를 검색했더니.. 바로 나왔다 🥹 !

 

사용법은 className 을 벡틱으로 감싸고 조건을 걸어주면 된다!

 

⭕️ 주관식 답

사용자가 입력한 답 === 정답 이라면 파란색으로!

<p className={`w-full pl-4 py-[9px] border-solid border
  ${usersAnswer?.answer === correct_answer ? ' border-pointColor1' : 
  'border-pointColor2'} rounded-md`}>
    {usersAnswer?.answer}
</p>

 

⭕️ 객관식 답

사용자가 입력한 선택지 === 이 선택지(map 을 돌려서 선택지를 표시했기에 같은 옵션인지 id 로 구분)이고

is_answer true 값을 갖고 있다면 파란색으로!

<div key={id} className={`pl-4 py-[9px] flex gap-4 border-solid border
  ${resultMode && usersAnswer?.option_id === id ? (is_answer ?
  'border-pointColor1 bg-bgColor2' : 'border-pointColor2 bg-bgColor3')
  : 'border-pointColor1'} rounded-md`}
>

 

 

 

처음엔 보더로만 구분했다가 나중에 배경색도 추가했다! 🤓

 

 

 

🔗 https://sezzled.tistory.com/13

tailwindCSS 조건에 따라 다르게 스타일링하기 (Conditional CSS)