[Tailwind] px 작성, 자동 rem 변환 (feat. pxr 단위)

시작하며...

Tailwind CSS 를 사용하면 기본적으로 rem 단위로 동작한다.

 

만약 조금 더 섬세하게 px 단위로 크기를 조절하고 싶은 경우에는 아래 코드처럼 사용하게 된다. 

<div className="min-w-[320px] rounded-10 p-5 shadow-md lg:p-8">

 

그런데 개발자 도구에 들어가서 보게 되면 어떤건 rem 단위, 어떤건 px 단위 이렇게 혼합되어 있는 것을 볼 수 있다.

 

개발자 도구

 

그래서 이러한 문제를 해결하여 px 단위로 작성하되, 실제 적용되는 건 rem 단위인 pxr 를 사용해보려고 한다.

 

pxr 단위

사실 Tailwind 를 사용하면서 위에와 같은 문제를 겪고 있었고 해결을 하고 싶었다.

 

그런데 지금 멘토님께서 pxr 단위라는 것을 알려주셔서 위에 문제를 해결할 수 있을 거 같아 이번 프로젝트에 적용하게 되었다!

 

관련 아티클

팀원분이 카카오페이지에서 Tailwind 에 pxr 단위를 적용한 내용에 관련된 아티클을 공유해주셨다 

 

[FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? - 새로운 단위 정의하기]

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블

 

“개발할 때는 디자인에서 명시된 px 단위로 디자인하되, 실제 페이지에는 rem 단위로 적용되어야 합니다.”

 

라는 내용이 적혀있었는데 이 부분이 마음에 들었다.

 

피그마상에서도 px 단위로 되어 있어 개발을 할 땐 px 단위로 사용하되, 실제 페이지에서는 현재 폰트사이즈에 따라 다르게 결정되는 rem 단위로 적용된다는 점이다.

 

라이브러리

위에 게시물에 pxr 단위로 적용하는 방법이 있지만 팀원분이 라이브러리를 알려주셔서 간편하게 라이브러리를 사용하였다.

 

[tailwindcss-preset-px-to-rem]

tailwindcss-preset-px-to-rem

 

tailwindcss-preset-px-to-rem 라이브러리

설치하기

먼저 라이브러리를 설치하였다. (참고로 yarn)

yarn add tailwindcss-preset-px-to-rem

 

+) npm

npm i tailwindcss-preset-px-to-rem

 

적용하기

공식문서에서는 아래 방식처럼 적용하라고 적혀있었다.

 

공식문서

 

그러나 ESLint 의 global-required 오류가 발생하여

 

global-require

 

아래처럼 바꿔서 tailwindcss-preset-px-to-rem 라이브러리를 적용시켰다.

import type { Config } from "tailwindcss";

const pxToRem = require("tailwindcss-preset-px-to-rem");

const config: Config = {
  presets: [pxToRem],
  // 생략
}

 

사용하기

사용방법은 그냥 편하게 단위를 제외하고, px 단위로 숫자로 입력하면 된다.

 

pxr 로

 

개발자 도구로 들어가서 실제 웹페이지의 단위를 보면 px 단위로 적었던 것이 rem 단위로 적용된 것을 확인할 수 있다. 

 

pxr 적용됨

 

마치며...

지난 프로젝트에서 Tailwind 를 사용하면서 어떤 건 px 단위로 쓰고 어떤 건 rem 단위로 쓰다보니 통일성이 사라졌고, 또한 px 보다는 rem 이 사용자 접근성 측면에서 더 좋다.

 

그래서 px 를 rem 으로 바꾸려해도 계산을 하여 rem 단위로 변환을 해야 하며, 지원하지 않는 길이(ex. 15px) 같은 경우 아래 코드처럼 번거롭게 커스텀마이징을 해야 된다.

// tailwind.config.ts
extend: {
  spacing: {
    '15px': '0.9375rem',
  },
},

 

그런데 pxr 단위를 도입하니깐, 피그마에도 px 단위로 적혀있어 편하게 px 단위를 바로 쓰고 웹페이지에서는 자동으로 rem 단위로 바뀐 상태로 보이게 된다. 아직까진 불편한 점은 없고 너무 편하다!