tailwind 문법 중첩 문제

문제 발생

 💁🏻 테일윈드 문법으로 customStyle 이라는 props 로 css 를 추가해 커스터마이즈된 버튼 컴포넌트를 생성했습니다. customStyle으로 배경색을 추가로 css 를 덮어 적용하기 성공했으나 특정 버튼의 텍스트 컬러만 덮어 씌워 적용되지 않고(customStyle=”text-[#2e5c8a]” ) default로 설정했던 text-white 로 보여지는 오류입니다.

처음 localhost 에 페이지를 띄울 때만 텍스트 컬러가 덮어 씌워 적용되지 않고 띄운후 지정하고 자 하는 색 컬러를 변경하면 제대로 동작합니다. 처음 렌더되었을 때 어떤 원인에 의해서 이러한 원인이 생기는 지 궁금했습니다. 

//Button.tsx
import React, { ButtonHTMLAttributes } from 'react';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  customStyle?: string;
}

function Button({ children, customStyle, ...attributes }: ButtonProps) {
  const buttonStyles = `
  text-white bg-[#4393F7] rounded-[6px]
  inline-flex 
  capitalize p-[10px]
  border-[1px]
  border-solid
  border-[#4393F7]
 text-[13px]
  p-[7px]
  hover:bg-[#0064C2]
  active:bg-[#2960B7]
  ${customStyle}`; // 커스텀 스타일을 포함한 클래스

  return (
    <button className={buttonStyles} {...attributes}>
      {children}
    </button>
  );
}

export default Button;

//header.tsx  첫 렌더링시 text-[#2e5c8a] 적용되지 않습니다. 
<Button customStyle="bg-[#d8e5ff] border-[#83A6C4] hover:bg-[#B9D2E8] active:bg-[#A6C4DF] mr-2 ">
              log in
</Button>

문제 탐구

 

문제 해결

최신 tailwind 문법에서는 인정하지 않는 것으로 파악했습니다. Button 컴포넌트 설계 시 customStyle 는 특수한 옵션만 받도록 하고 text color 처럼 반복적으로 사용하는 프로퍼티는 별도 props 등을 통해 동적으로 받도록 수정

 

 

https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/