지난 포스트에서는 Tailwind CSS를 팀 프로젝트에서 더 효율적으로 사용하는 방법에 대해 다뤘습니다.
특히, VS Code 확장 도구와 Prettier를 활용한 클래스 순서 정렬로 생산성과 협업 효율을 높이는 방법을 소개했습니다.
이번 포스트에서는
Tailwind CSS에서 rem 단위와 px 단위 간 불편함 해결 에 대해 다뤄보려고 합니다.
Tailwind CSS는 기본적으로 rem 단위를 사용합니다. 이는 반응형 디자인과 접근성을 강화하는 데 유리하지만, px 단위를 사용하는 디자이너와의 협업에서는 불편함을 초래할 수 있습니다. 매번 px → rem 변환을 해야 하거나, Tailwind에서 [30px]과 같이 괄호로 px 값을 직접 입력해야 하는 번거로움이 있습니다.
예시:
padding : 30px
font-size: 24px를 적용해보겠습니다.
- 30px → 1.875rem (기본 설정에서 1rem = 16px)
- 24px → 1.5rem
<div class="p-1.875 text-1.5">
rem 단위로 스타일 적용
</div>혹은,
<div class="p-[30px] text-[24px]">
px 단위로 스타일 적용
</div>변환 과정이 반복되면 생산성이 저하되고, 긴 클래스 목록에서 괄호 표기법은 코드 가독성을 떨어뜨립니다.
해결 방법
tailwindcss-preset-px-to-rem 사용
tailwindcss-preset-px-to-rem은 px 단위를 rem으로 자동 변환해주는 Tailwind CSS 프리셋입니다.
이 프리셋을 사용하면 px 값을 그대로 입력하면서도 Tailwind의 rem 기반 스타일링을 유지할 수 있습니다.
1. 설치
터미널에서 tailwindcss-preset-px-to-rem을 설치합니다.
npm install tailwindcss-preset-px-to-rem
2. Tailwind 설정 파일 수정
tailwind.config.js 파일에서 프리셋을 추가합니다.
const pxToRem = require('tailwindcss-preset-px-to-rem');
module.exports = {
presets: [pxToRem()], // px to rem 프리셋 추가
content: ['./src/**/*.{html,js,jsx,ts,tsx}'], // 경로 설정
theme: {
extend: {},
},
};
혹은 이런식으로 직접 추가해도 작동이 되긴 합니다.
presets: [require("tailwindcss-preset-px-to-rem")],설정을 완료하면, Tailwind의 클래스처럼 px 단위를 간편히 사용할 수 있습니다.
도입 전 :
<div class="p-[30px] text-[24px]">
px 단위로 스타일 적용
</div>
도입 후 :
<div class="p-30 text-24">
px 단위로 스타일 적용
</div>
tailwindcss-preset-px-to-rem은 30px을 자동으로 1.875rem로 변환하여 브라우저에 적용합니다.
3. 결과
1. px 단위를 직관적으로 사용 가능
px 단위를 그대로 입력하면 rem으로 자동 변환되므로, px → rem 변환 과정을 생략할 수 있습니다.
2. 코드 가독성 향상
괄호([]) 표기 없이 간단한 클래스 이름을 사용하므로 코드가 더 깔끔해집니다.
3. 디자인 협업 최적화
디자이너가 제공한 px 값을 그대로 사용하므로, 팀 간의 작업 흐름이 자연스러워집니다.
이번 포스트에서는Tailwind CSS 사용 중 px 단위와 rem 단위 간의 불편함을 해결하는 방법으로 tailwindcss-preset-px-to-rem 라이브러리를 도입하는 과정을 다뤘습니다.
이 라이브러리를 통해 px 단위를 직관적으로 사용할 수 있게 되었고,괄호 표기 없이 간결한 클래스 작성으로 코드 가독성을 높일 수 있었습니다. 또한, 디자이너와 개발자 간의 단위 불일치 문제를 해결하여 디자인 협업 과정이 더 매끄러워졌습니다.
Tailwind CSS를 사용하는 팀이라면, 이와 같은 설정을 통해 더 효율적인 작업 환경을 구축해보세요!
