🌱 성장일지 9.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

• 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
• 성장하고 있는 것이 살아 있는 것이다.
• 생명의 유일한 증거는 성장이다!

⚛ (8.0)<완전 개편> 그 날의 키워드 중심으로 간단하게 정리하되 매일 꾸준히 작성할 수 있는 공간을 만들어보자.

clsx

clsx는 거의 동일한 기능을 제공하는 라이브러리로 조건부 class를 작성할 때 사용한다.

import { clsx } from 'clsx';

const className = clsx({
  'class-name': true,
  'class-name-2': false,
});

className하면 떠오르는 스타일 라이브러리가 있다. 바로 tailwindcss이다. tailwind에 적용하면 깔끔하게 사용할 수 있다.

import { clsx } from 'clsx';

const backgroundColor = clsx({
  'bg-red-500': true, // 주로 여기에 props에 따른 boolean 값을 넣는다.
  'bg-blue-500': false,
});

twin.macro

twin.macro는 tailwindcss를 사용할 때 css-in-js를 사용할 수 있도록 도와주는 라이브러리이다.

정말 단순하게 생각하면 tailwindcss와 styled-components 혹은 emotion을 함께 사용할 수 있도록 도와주는 라이브러리이다.

아무래도 tailwindcss만 사용하면 동적인 스타일링에 한계가 있기 때문에 사용한다.

📝 회고

참고

• clsx 깃허브
• twin.macro 깃허브