twin + styled 동적 할당 시 tw 사용이 불가능한 이유

문제 발생

tailwindCSS와 styled-components를 함께 사용하기 위해  twin.macro를 설치했습니다.

그런데 동적 할당을 받는 styled 안에서는 tw 사용이 불가능한 문제가 발생했습니다.

 

 

 

 

styled-components에 동적 할당을 받으면 tw 사용이 불가능하다?

아래 링크에서 저와 똑같은 문제를 겪은 사람의 이슈를 발견했습니다.

 

String interpolation inside tw macro doesn't work · Issue #17 · ben-rogerson/twin.macro

 

이슈는 아래와 같습니다.

 

이슈 상황

 

저와 아주 일치한 문제였습니다.

 

어떤 props를 인자로 받고, 가변적인 변수에 따라 css 스타일을 적용하고 싶다

-> 그 과정에서, 위와 완전 일치한 에러는 아니지만 tailwindCSS를 인식하지 못 하는 에러가 발생

 

 

원인: 그 이유는 Babel의 제한 때문

 

이유는 아래와 같습니다.

 

Due to Babel limitations, tailwind classes and short css values can’t have any part of them dynamically created.
This is because babel doesn’t know the values of the variables and so twin can’t make a conversion to css.

 

Babel의 제한 때문에 tailwind 클래스는 동적으로 생성될 수 없다는 것입니다.

 

Babel은 변수 값을 몰라서 tw를 css로 변환할 수 없다고 합니다. 여기서 변수 값을 모른다는 건 위 예시에서 가변적인 color 인자가 무엇이 될지 모른다는 것입니다.

 

그래서 아래 코드를 보면

const Component = styled.div(({ spacing }) => [
  tw`mt-${spacing === 'sm' ? 2 : 4}`, // Won't work with tailwind classes
  `margin-top[${spacing === 'sm' ? 2 : 4}rem]`, // Won't work with short css
])

원래 목적이라면, spacing이 'sm'이면 margin-top: 2px, 아니면 margin-top: 4px이 되어야 하지만 tailwind class 로는 작동하지 않습니다. 아래 같은 이유로 short css도 적용 안 된다고 합니다.

 

더 자세한 예시는 아래 링크를 참고해주세요.

 

Interpolation into template literals · ben-rogerson/twin.macro · Discussion #393

 

 

해결 방법

1. tw 디자인 토큰 객체를 만들기

아래 코드와 같이 tw class 값을 별도 객체로 정의한 뒤 맵핑하는 방법이 있습니다. 마치 디자인 토큰을 정해두는 것처럼요.

const styleMap = {
  primary: tw`bg-black text-white`,
  secondary: tw`bg-white text-black`,
  default: tw`bg-gray-500`
}

const getStyleName = ({ name }) => styleMap[name] || styleMap.default

const Button = styled.button(getStyleName)

const Buttons = () => (
  <>
    <Button name="primary">Primary</Button>
    <Button name="secondary">Secondary</Button>
    <Button>Default</Button>
  </>
)

 

2. tw로 이루어진 css 변수를 만들기

또는 아래와 같이 css로 tw를 감싸서 css 변수를 할당해주는 방법도 있습니다.

const TWdesign = css`
	tw`mt-10 pb-20`;
`;

const Styled = styled.div<{ size }>`
	${(props)=> props.size == 'big' && 
    	Twdesign
    }
`

 

저는 디자인 토큰 객체를 만들어 사용하는 게 더 가독성이 좋아보입니다.