Tailwind 적용 시 font-size 기반으로 rem 이 정해진다고 하는데,

[kimpearl3599]

font-size가 기본 16px 라고 가정했을 때,
예를 들어 h-4 라고 className을 작성하면 높이가 4rem인 요소가 생성이 되어야 하는데
1/4 인 1rem으로 생성이 되는 문제가 있어서

index.css 파일에 아래와 같이 기본 폰트 값을 추가해봤는데
해결이 안되네요...

h-1 이면 높이가 1rem
h-4 이면 높이가 4rem 이 되게 설정되게 하는 방법이 있을까요? @_@

[Yoonyesol]

진주님! tailwind 공식문서를 살펴보니 h-1이 0.25rem으로 4px이더라구요.

커스텀을 하려면 tailwind.config.js 파일에서 따로 수정을 좀 해줘야 합니다!

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        '1': '1rem',  // 1rem (16px)
        '4': '4rem',  // 4rem (64px)
      },
    },
  },
  variants: {},
  plugins: [],
};

[Seok93]

html에 설정된 기본 font-size는 16px이고, 이 값이 1rem을 의미하잖아요?
tailwindcss에서 h-4는 1rem을 의미하니, 원하시는 4rem은 안나오리라 생각되어요.

만약에 h-4가 4rem이 되길 바란다면, 기존에 있는 속성을 오버라이딩 하셔야할 것 같아요. 아래와 같이 theme 속성에서 spacing 관련된 내용을 건드리면 할 수 있어요. (customizing spacing 문서 참고)

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    spacing: {
      1: '1rem',
      2: '2rem',
      3: '3rem',
      4: '4rem',
    },
  },
  plugins: [],
};

그런데 커스텀 관련된 문서를 보다보면 직접적으로 설정시, 기존의 내용이 사라진다고 하네요. 그래서 다른 내용을 유지하면서 원하는 부분을 추가하려면 기존의 내용을 상속하도록 만들어야 해요.

추가적으로 tailwid.config.js가 js 파일이고, export default로 반환하는 데이터가 객체잖아요? js 문법을 이용하여 특정 부분에 반복적은 속성 정의를 이용하는 방법도 있어요. (comento tailwind: 우리 디자인에 맞게 커스텀하기 참조)

[kimpearl3599]

혹시 spacing 커스텀에 대해서는 예솔님, 우석님 의견이 어떤지 들어보고 싶습니다.
현 상태로 써도 큰 문제는 없지만, 직관성이 조금 떨어지는 느낌이라서요 :) 의견주세용!

[Seok93]

@kimpearl3599
그렇겠네요 ㅋㅋㅋㅋㅋ

root font-size를 10px로 설정하고, 단위를 1/10로 하려고 했다면, 처음부터 고려했어야 했네요 ㅎㅎ...

그럼 진주님 말씀대로 16px은 고정하고, spacing 단위만 커스텀 해볼게요. 0부터 40rem까지 가능하도록 한 번 설정해볼게요. (팝업 최소 크기를 600px로 고려하고 있고, 이 값은 37.5rem이니 편의상 40rem까지 만드려고 생각합니다.)

[kimpearl3599]

매번 사용할 때마다 *4를 해줘야 하는 불편함이 있는 것 같아서
생각해봤는데 제가 일을 키운 건 아닌지... 염려스럽네요 ㅠ
혹시 우석님 현재 만들고 있는 css 모듈들 샘플로 살짝 볼 수 있을까요??

[Seok93]

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      spacing: customSpacing,
    },
  },
  plugins: [],
};

export const customSpacing = {};
for (let i = 0; i <= 400; i++) {
  customSpacing[i] = `${(i * 0.1).toFixed(1)}rem`;
}

위와 같이 변수로 만들어서 설정하려고 생각하고 있어요

[Seok93]

다른 내용이랑 합치면 이런식으로 나올 것 같아요 (아직 설정 중이라서 예시로만 봐주세요!)

[kimpearl3599]

자료 찾아보니까 아이콘도 별도로 모아서 세팅하는 방식으로 사용하더라구요....
css 세계란... 엄청난 것 같습니다 수고 많으셨어요 >_<