이전 포스팅에서 말했던 것처럼 원래는
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로 불러서 쓸 수 있어 훨씬 작업하기 편한 것 같다!
