[공감병동 프로젝트] tailwind css 기초 세팅

somin·2021년 12월 1일

프로젝트

공감병동 프로젝트

목록 보기

5/12

이전 포스팅에서 말했던 것처럼 원래는 emotion을 쓸 계획이었지만, css에 대해 좀 더 공부를 하던 중 tailwind가 눈에 들어왔다.

tailwind

결국 tailwind를 써보기로 했는데, 그 이유는 Purge라는 기능을 쓰면 안쓰는 모듈을 삭제 후 번들링해주기 때문에 패키지를 가볍게 만들 수 있기 때문이다.

사실 지금까지 styled-component를 주로 사용했는데, 안쓰는 속성들을 정리 한다고 하긴 했지만 깔끔하게 정리하지 못해 찝찝함이 매번 남아있었다. 하지만 tailwind는 이를 정리하기 수월하고, 덕분에 패키지까지 가볍게 할 수 있다.

코드스테이츠 교육에서도 스스로 학습하면 좋은 주제로 tailwind가 적혀져 있었는데, 여전히 나에겐 과제로만 남아있었다. 그래서 이번 기회에 사용해보기로 결정한 것이다!

tailwind.config.js

module.exports = {
...
}

1. purge

우선 사용하지 않는 CSS를 제거하기 위해 purge를 설정해 주었다.

purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]

2. theme

1) screens

테마는 UI 디자인을 참고하여 screens의 width를 지정해 주었다.

screens: {
   md: "600px",
   lg: "1100px",
}

이 부분은 사실 시행차고가 많았다. figma에서 디자인 해둔 넓이대로 웹에 적용해보니 많이 어색했기 때문이다. 그래서 팀원과 상의하여 약간 수정하였다.

2) fontFamily

fontFamily에는 우리 프로젝트에서 사용하는 폰트들을 지정해 주었다.

fontFamily: {
  main: ["Gowun Batang", "serif"],
  sub: ["Noto Sans KR", "sans-serif"],
}

전역에 해당 폰트를 적용하기 위해 root에 _document.tsx파일을 만들어 link 태그로 불러와 적용시켜 주었다.

import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR&family=Roboto&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

3) extend

(1) width

width: {
  sm: "320px",
  md: "700px",
  lg: "1032px",
}

(2) colors

컬러는 블루 2개, 블랙 1개, 그레이 2개로 지정해 주었고, 이는 ***-blue-main처럼 사용할 수 있다.

colors: {
  ...
  blue: {
    main: "#0984C0",
    sub: "#60BDD1",
  },
  black: {
    main: "#2c2c2b",
  },
  gray: {
    main: "#565759",
    sub: "#AAA7B0",
}

4) variants

이 부분은 작업을 하다가 hover나 active 효과를 주기 위해 추가한 부분이다.

variants: {
  extend: {
    fontWeight: ["hover"],
    textColor: ["active"],
    backgroundColor: ["active"],
    borderColor: ["active"],
  },
},

물론 정말 일부분의 기능들만 사용하고 있긴 하지만 tailwind.config에 css 속성들을 지정해 놓으니 전체적인 디자인에 통일감을 줄 수 있고, 반응형을 위한 screens 넓이를 적어놓지 않고도 md나 lg로 불러서 쓸 수 있어 훨씬 작업하기 편한 것 같다!