Tailwind:typescript

className function

jsx 혹은 tsx에서 프로퍼티를 자바스크립트 코드로 짜려면 ` `(백틱)과 ${ }를 사용해야 한다. 충분히 유용하지만 코드 형태가 예쁘지 않다. 이때는 함수를 선언해 깔끔한 코딩이 가능하다.

// 백틱으로 추가한 코드
<div className={`p-10 bg-red-500 ${name === "bird" ? "text-white" : "text-black"}`}>
  Lorem ipsum...
</div>

// 함수 선언으로 추가한 코드
function clsName(...classnames: string[]) {
  return classnames.join(" ");
}

<div className={clsName("p-10 bg-red-500", name === "bird" ? "text-white" : "text-black")}>
  Lorem ipsum...
</div>

clsName 함수에 일반적으로 적는 className을 인자로 넣으면 공백으로 구분한 문자열로 결합해준다. 상위에 함수를 선언해두고 복합적인 className을 작성할 때 호출하면 된다.

plugins

https://tailwindcss.com/docs/plugins에서 다양한 플러그인 기능을 확인할 수 있다.

강의 들으며 사용한 forms 플러그인 설치와 적용은 아래처럼 한다.

// terminal에서
npm i @tailwindcss/forms

// tailwind.config.js에서
module.exports = {
  content: [],
  theme: {},
  plugins: [require("@tailwindcss/forms")],
};

참고
노마드 코더 - 캐럿마켓 클론코딩
Tailwind CSS