[공감병동 프로젝트] tailwind css

Styling을 어떤걸로 할지 여러가지를 고민해봤다.
styled-component, emotion, tailwind등의 여러가지 선택지가 있었지만,
tailwind의 공식문서를 보고 그 간편함에 매료되었고
꼭 써봐야겠다고 다짐했고, 이번 프로젝트에 바로 적용하기로 했다.

tailwind 사용법

한 줄이면 설명이 끝난다.

<div className="flex flex-col items-start font-main">

이걸 CSS로 표현하자면

* {
display: flex,
flex-direction: column;
align-items : flex-start;
font-family: Gowun Batang, serif;
}

이다. 이처럼 tailwind에서 특정하게 정해놓은 키워드를 인라인으로 입력하면 알아서 css 속성으로 변환해준다. 그렇다면 자주 쓰는 것을 등록하거나, 커스텀하고 싶은 경우는 어떻게 해야 할까?

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      md: "600px",
      lg: "1100px",
    },
    fontFamily: {
      main: ["Gowun Batang", "serif"],
      sub: ["Noto Sans KR", "sans-serif"],
      google: ["Roboto", "sans-serif"],
    },
    extend: {
      typography: {
        DEFAULT: {
          css: {
            h1: {
              color: "#2c2c2b",
              fontSize: "1.875em",
            },
            h2: {
              color: "#2c2c2b",
            },
            p: {
              color: "#565759",
            },
            blockquote: {
              color: "#2c2c2b",
            },
            b: {
              color: "#0984C0",
            },
          },
        },
      },
      width: {
        sm: "320px",
        md: "700px",
        lg: "1032px",
      },
      height: {
        sm: "220px",
        md: "500px",
      },
      colors: {
        transparent: "transparent",
        current: "currentColor",
        blue: {
          main: "#0984C0",
          sub: "#60BDD1",
        },
        black: {
          main: "#2c2c2b",
        },
        gray: {
          main: "#565759",
          sub: "#AAA7B0",
        },
        kakao: {
          container: "#FEE500",
          label: "#000000",
        },
        google: {
          label: "#757575",
        },
        toggle: {
          pink: "#F28F8F",
          yellow: "#FCE44D",
        },
      },
      fill: {
        blue: {
          main: "#0984C0",
          sub: "#60BDD1",
        },
      },
      dropShadow: {
        base: "0px 0px 4px rgba(0, 0, 0, 0.2)",
      },
    },
  },
  variants: {
    extend: {
      fontWeight: ["hover"],
      textColor: ["active"],
      backgroundColor: ["active"],
      borderColor: ["active"],
      fill: ["active"],
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/line-clamp"),
  ],
};

이런식으로 필요에 따라 커스텀하고 싶은 속성들을 추가하고, 필요한 플러그인까지 편하게 추가 할 수 있다. 공식 문서가 굉장히 깔끔하게 나와있어 작업하는데에도 매우 편안하게 할 수 있었다.

단점? 으로 느껴지는 부분

<div className="flex items-center gap-3 mt-2 ">
      <div className="flex flex-col items-start  text-black-main font-main font-bold text-lg text-ellipsis line-clamp-1 ">
        <span>{post.title}</span>
      </div>
      <span className="mt-1 text-gray-sub font-main text-sm h-10 line-clamp-2">
        {post.description}
      </span>
      <div className="mt-1 pt-1 flex-col lg:flex-row flex justify-between border-t border-gray-200">
        <span className="text-gray-sub text-xs font-main">
          {moment(post.createdAt).format("LL")}, {post.weather}
        </span>
        <span className="text-gray-sub text-xs font-main">by. {post.user}</span>
      </div>
    </div>
</div>

작업한 코드의 일부분을 가져와 봤다. 작업하기는 정말 편한데, 반응형도 추가하고, 각종 속성들을 넣다보면 꽤나 지저분해진다. 규칙을 정해서 디스플레이 속성 - 텍스트 속성 - 색상 속성 이런식으로 하면 어떨까 싶었지만, 이는 또 tailwindcss의 최대 장점인 작업성의 저하를 불러올 것 같아서 고민이 조금 되었다. 그래도 만족스러웠다