[FE]Gnims팀이 tailwind Css를 쓰는 또 하나의 이유! [tailwind css custom]

안녕하세요!

 

지난번 게시글에서 tailwind css를 도입하게된 이유로,

tailwind의 가장 큰 장점인 작업속도가 빨라진다는 점을 소개드렸었는데요!

2주간 경험하며 느낀 점은 코드의 class명이 길어지어져 깔끔해보이진 않지만, 확실히 속도가 나고있습니다!

 

또 다른 이유로는 CSS를 커스텀하여 패키지화할 수 있다는 점이 있습니다.

 

tip!

테일윈드는 공식문서가 굉장히 잘 정리되어있습니다!

그래서 모든 내용을 외울 필요 없이 공식 문서에서 (command+K) 로 검색해서 바로바로 찾아 쓸 수 있어요 😃

또, 참고하기에 쉽게 깔끔하게 정리되어있어 바로바로 찾기도 쉽습니다.

 

 

 

tailwind css custom

tailwind.config.js 의 extend 내에 많이 이용할 것 같은 css 코드를 옮겨주시면 됩니다!

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontSize: {
        sm: ["16px", "19px"],
        md: ["20px", "24px"],
      },
      colors: {
        sora: "#538EDF",
        nam: "#015397",
        parang: "#1098ED",
        textNavy: "#12396F",
      },
    },
  },
  plugins: [],
};

저희가 이용한 테마컬러와 폰트사이즈를 예시로 보여드립니다!

(위의 content는 하나라도 빠트리면 큰일 납니다! 코드를 옮기다 실수로 * 하나를 지웠는데, 어마어마한 파장이 있었어요..😳)

 

테일윈드는 px단위를 이용하려면 대괄호를 매번 이용해야하는 불편함이 조금 있는데,

동환님께서 그런 점을 편하게 하기위해 많이 쓰이는 텍스트 사이즈를 커스텀해서 활용하셨더라고요!

테일윈드 픽셀단위 이용방법

tailwind.config.js파일에 지정해둔 키워드를 그대로 가져오면 적용이 됩니다 :) 다른 세팅할건 전혀 없어요

 

그리고 저희 Gnims서비스에는 스케쥴의 카드컬러를 고를 수 있는 기능이 있는데, 

소라색을 골라서 스케쥴을 등록했다면, 컬러를 보여주는 스케쥴리스트에서는 sora라는 cardColor의 값을 서버로부터 받아서 

sora로 커스텀해둔 코드를 그대로 들고 와 색상을 표현할 수 있게 구현했습니다. 

<div className={`bg-${schedule.cardColor} `}>

테일윈드 커스텀, 참 쉽죠? 😎

 

 

 

저희 그님스는 잘못된 정보에 대한 지적과 조언의 댓글을 언제나 환영합니다! 

 

참고한 사이트

https://tailwindcss.com/docs/customizing-colors#using-custom-colors