깔끔하게 조건부 스타일링하기 (feat. classnames)

Next.js 프로젝트에서 tailwindcss를 사용해 스타일링하고 있다.

tailwindcss는 조건부 스타일링을 적용하다보면 클래스가 지저분해지는데, classnames 라이브러리를 사용해서 좀 더 간편하게 사용해보자.

pnpm add classnames

classnames 쓰기 전

<label className={`h-30 w-100 font-semibold ${error ? text-red-500 : ''}`}>
      {label}
</label>

classnames 쓴 후

import cn from 'classnames';

<label className={cn('h-30 w-100 font-semibold', { 'text-red-500': error })}>
      {label}
</label>

• value가 true면 적용하고, false면 무시한다.

더 복잡한 걸 적용할수록 보기 편해질 듯하다.