[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - tailwind

tailwind 적용하기

tailwind는 bootstrap과 비슷하게 태그에 class 속성을 부여해 디자인을 적용하는 라이브러리다.
그래서 처음에는 익숙해지는 데까지 오래걸리지 않을까라는 걱정이 들었지만 막상 사용하다보니 부트스트랩을 사용하는 것과 매우 유사하다고 느껴져서 생각보다 빠르게 익힐 수 있었던 것 같다.

설치

https://tailwindcss.com/docs/guides/vite
위의 링크를 타고 들어가서 Install Tailwind CSS 부터 적용해줬다.

공식문서에서 css 속성을 검색하면서 특정 속성을 className에 추가해주면 쉽게 스타일을 적용할 수 있다.

같이 사용하면 좋은 라이브러리

twMerge

앞과 뒤를 합쳐주는데 뒤에 있는 중복되는 속성이 있다면 앞의 속성을 뒤의 속성으로 덮어쓴다.
따라서 중복된 속성을 하나만 남기고 합친다.

import { twMerge } from "tailwind-merge";

const App = () => {
  const isLoggedIn = true;

  return (
    <>
      <h1
        className={twMerge(
          "text-3xl underline",
          isLoggedIn ? "text-5xl text-rose-500" : ""
        )}
      >
        App Component
      </h1>
    </>
  );
};
export default App;

twJoin

동일하게 앞과 뒤를 합쳐주는데 중복을 제거하지 않고 사용한다.

import { twJoin, twMerge } from "tailwind-merge";

const App = () => {
  const isLoggedIn = true;

  return (
    <>
      <h1
        className={twJoin(
          "text-3xl underline",
          isLoggedIn ? "text-5xl text-rose-500" : ""
        )}
      >
        App Component
      </h1>
    </>
  );
};
export default App;

자주 사용하는 스타일 등록하기

@layer components {
  .item-middle {
    @apply flex items-center justify-center min-h-screen;
  }
}

위의 코드는 컴포넌트를 중앙정렬하는 스타일이다. 이제 컴포넌트의 className에 길게 속성을 부여하지 않아도 item-middle을 넣어주면 간편하게 중앙정렬 스타일을 적용할 수 있다.

추가 내용

ComponentPropsWithoutRef

    type TTypeName = React.ComponentPropsWithoutRef<"tag">;

 

위의 코드를 사용하면 특정 태그 속성의 모든 타입을 props로 정의한다.

ComponentPropWithuotRef와 twJoin을 응용한 코드

import { twMerge } from "tailwind-merge";

type TInputProps = React.ComponentPropsWithoutRef<"input">;

const CustomInput = ({ className, ...rest }: TInputProps) => {
  return (
    <>
      <input
        className={twMerge(
          "w-60 h-11 rounded-lg border border-[#4f4f4f] px-4 py-[13.5px] placeholder:text-[#ACACAC] text-sm outline-none",
          className
        )}
        {...rest}
      />
    </>
  );
};
export default CustomInput;

이렇게 작성하면 아래와 같이 호출할 수 있고

<CustomInput
  className="text-red-500"
  type="text"
  placeholder="Enter Todo List"
 />

className으로 추가적인 스타일을 적용하고 input 태그의 속성을 정의해서 넘겨줄 수 있다.