tailwindcss 적용하기 (1)

jinvicky·2024년 1월 18일

걍진커미션 프로젝트

목록 보기

16/28

Intro

기존에는 리액트 코드를 전부 다 일일이 sass 문법으로 짰었는데 일관성이 없고, 1-2명이 하는 프로젝트라서 시간상 tailwindcss를 도입하기로 했다.

Tailwindcss란?

일종의 bootstrap같은 프론트 라이브러리다.
스타일을 추가할 때 마다 className의 길이가 늘어나기 때문에 가독성이 매우 구리지만, 그것 외에는 장점이 더 많다.

👉 기존 내 방식의 단점

디자인에 통일성이 없다. (버튼, 인풋 등등)
시간 대비 결과물이 좋지 않다.
일일이 짜려니 시간이 부족하다.

✅ Tailwindcss 장점

시간 대비 빠르고 예쁘다.
Flowbite등의 사이트에서 다양한 템플릿을 얻을 수 있다.
다크모드도 쉽게 구현 가능하다.
style.scss 파일들이 필요없다.

React 프로젝트에 적용하기

워낙 간단해서 공식 문서로 해결된다
참고 https://tailwindcss.com/docs/installation

커스텀 컬러 등록하기

tailwindcss의 컬러 말고도 내 사이트의 primary color등을 정하고 싶다면 아래와 같이 해보자.
(참고로 리액트 설정을 동료의 도움으로 vite로 이전했습니다)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'primary': '#ff6363',
        'dark': '#333333',
        'mint': '#17d1c2',
      }
    },
  },
  plugins: [],
}

물론 커스텀으로 등록했기 때문에 text-primary-500처럼 뒤에 -500등의 값이 들어가면 적용되지 않는다.

<button className="text-primary">Button</button>

동적 css 설정하기

결론부터 말하자면 동적 css 안된다.

참고 https://moon-ga.github.io/tailwind_css/2-dynamic-classnames/


<div className={`${true ? "text-blue-500" : ""}`}>

위 코드는 제대로 동작한다.


<div className={`text-${true ? "primary-500" : "rose-500" }`} >

띄어쓰기를 기준으로 한 단어 묶음을 쪼개서 동적으로 값을 분기처리할 수 없다는 말이다.

하지만 버튼 컴포넌트를 만들 때 color를 props로 받아서 처리하고 싶단 말이다! 그래서 야매로 아래처럼 ts파일을 만들었다.

type ClassType = {
  [key: string]: string;
};

export const BgColors: ClassType ={
  Rose: "bg-rose-500",
  Blue: "bg-blue-500",
  Primary: "bg-primary"
}

export const BgHoverColors: ClassType ={
  Rose: "hover:bg-rose-700",
  Blue: "hover:bg-blue-700",
};

export const TxtColors: ClassType ={
  Rose: "text-rose-500",
  Blue: "text-blue-500",
}

export const getColorByType = (color: keyof ClassType, type: string): string  => {
  switch(type){
    case "bg":
      return BgColors[color];
    case "bgHover":
      return BgHoverColors[color];
    case "txt" :
      return TxtColors[color];
    default:
      return BgColors[color];
  }
}

color 등록은 점차 늘릴 것이고, 버튼 컴포넌트에서는 아래와 같이 사용하고 있다.

<Button
		value={props.btnTxt ? props.btnTxt : "신규 바로 가기"}
        color="Rose"
        onClick={() => {
        if (props.btnLink) window.location.href = props.btnLink;
        }}
/>

/* 버튼 컴포넌트의 일부 */
return (
    <button
      className={
        buildClass(
          getColorByType(props.color, "bg"),
          getColorByType(props.color, "bgHover"),
          getRoundType(props.radius),
          props.disabled ? "cursor-not-allowed" : "",
          "text-white font-bold py-2 px-4",
          props.className ? props.className : "",
        )}
      onClick={props.onClick}
    >
      {props.value}
    </button>
  );