Tailwind CSS 기본 글꼴 크기를 변경하는 방법

이 게시물은 원래 Red Pixel Themes에 게시되었습니다.


한동안 Tailwind CSS를 사용해 왔다면 최신 HTML/CSS 개발을 위한 많은 모범 사례와 권장 사항을 사용한다는 것을 알고 있을 것입니다. 멋진 재설정 스타일, CSS 사용자 지정 속성 사용 등

그러나 작업 흐름에 따라 변경할 수 있는 특정 기능이 하나 있는데 이것이 바로 기본 글꼴 크기입니다.

Tailwind CSS의 기본 글꼴 크기

현재 Tailwind CSS 기본 글꼴 크기는 16px입니다. 왜 16px입니까? 이것은 Chrome과 같이 가장 많이 사용되는 브라우저의 기본 글꼴 크기이기 때문입니다.

많은 Tailwind 기본값이 REM 값을 사용하므로 이러한 모든 값에 기본 글꼴 크기를 곱하여 픽셀 값을 얻습니다.

이를 바탕으로 text-lg 클래스가 1.125rem 이면 픽셀 단위로 16 * 1.125 = 18px 가 됩니다. 이것은 공식 VSCode 확장을 사용하는 경우 클래스 미리보기에서 볼 수 있는 것과 정확히 같습니다.

변경 방법은 다음과 같습니다.

Tailwind 기본 글꼴 크기를 변경하려면 다음 두 가지 방법을 사용할 수 있습니다.

1. 사용자 정의 CSS로 수행

이 규칙을 CSS 파일에 추가하여:

html {
  font-size: 10px; 
}

2. 플러그인을 통해 수행

구성 파일에 다음을 추가합니다.

const plugin = require('tailwindcss/plugin');

module.exports = {
  // other settings
  plugins: [
    plugin(function({ addBase }) {
     addBase({
        'html': { fontSize: "10px" },
      })
    }),
  ],
}

이제 Tailwind의 모든 기본 REM 값이 10px를 기준으로 다시 계산됩니다.

이제 text-lg 클래스는 10 * 1.125 = 11.25px 가 됩니다.

그게 다야! 이제 모든 REM 값은 기본 10을 사용합니다.

여기a Tailwind Play link에서 플러그인 접근 방식을 사용하고 있습니다.

VSCode 확장을 사용하는 경우 추가 단계

VSCode용 공식 확장을 사용하는 경우 클래스 미리보기에 여전히 16px를 기본으로 사용하는 픽셀 값이 표시되는 것을 알 수 있습니다. 이를 변경하려면 VSCode 구성에 다음을 추가해야 합니다.

// other vscode settings
"tailwindCSS.rootFontSize": 10 // <- your root font size here

이제 클래스 미리보기에 올바른 값이 표시됩니다.




이게 다야! Tailwind CSS 기본 글꼴 크기를 변경하는 방법과 VSCode 확장이 클래스 미리 보기에서 해당 변경 사항을 반영하도록 만드는 방법을 배웠기를 바랍니다.