TailwindCSS에서 간격 값을 재사용하는 방법

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

Tailwind CSS 공간 규모의 작동 방식

순풍 척도는 4의 계수를 사용합니다. 이는 4씩 증가한다는 의미입니다. 추가하려는 각각의 새 값에 대해 올바른 수학을 얻으려면 다음 공식을 사용할 수 있습니다.

픽셀 값:

(valueInPixels / 16) * 4

렘 값의 경우:

(valueInRems * 16) / 4

예를 들어 픽셀 값이 82이고 이를 적절한 "Tailwind"값으로 변환하려는 경우 80 / 16 * 4,를 수행하면 20가 됩니다. rems 값의 경우, 32rem가 32 * 16 / 4이고 이는 128입니다.

⭐ 저는 픽셀 계산 공식을 너무 많이 사용해서 저를 위해 alfred workflow을 만들었고 공유하기로 했습니다. 다운로드할 수 있습니다 here . 모르는 사람들을 위해 Alfred은 Spotlight 대안이며 Mac 전용입니다. 무료이지만 워크플로를 사용하려면 Powerpack 비용을 지불해야 합니다.

다른 속성에서 재사용하는 방법

일부 속성의 경우 수동으로 값을 추가하는 대신 간격 척도를 재사용할 수 있습니다. 이렇게 하려면 구성 내에서 theme() 함수를 사용할 수 있는 함수를 사용하도록 해당 속성을 변경해야 합니다. 예를 들면 다음과 같습니다.

extended: {
    minHeight: ({ theme }) => ({ // get the theme func from the 1st arg
        ...theme('spacing'), // adds all values of spacing to min-height
          25: '6.25rem',
    }),
}

다음과 같은 다른 속성에 대해서도 이 작업을 수행할 수 있습니다.

extended: {
    // Max width
    maxWidth: ({ theme }) => ({
        ...theme('spacing'),
    }),
    // Min width
    minWidth: ({ theme }) => ({
        ...theme('spacing'),
    }),
}

여기 내 더 큰 간격 척도가 있습니다.

이제 간격 척도의 작동 방식과 재사용 방법을 알았으므로 모든 프로젝트에서 사용하는 확장 버전도 공유하고 싶습니다. 이렇게 하면 현재 공식 척도에서 누락된 값이 많이 추가되고 값이 200까지 확장됩니다.

extend: {
    spacing: {
    "13": '3.25rem',
    "15": '3.75rem',
    "17": '4.25rem',
    "18": '4.5rem',
    "19": '4.75rem',
    "76": "19rem",
    "84": "21rem",
    "88": "22rem",
    "92": "23rem",
    "100": "25rem",
    "104": "26rem",
    "108": "27rem",
    "112": "28rem",
    "116": "29rem",
    "120": "30rem",
    "124": "31rem",
    "128": "32rem",
    "132": "33rem",
    "136": "34rem",
    "140": "35rem",
    "144": "36rem",
    "148": "37rem",
    "152": "38rem",
    "156": "39rem",
    "160": "40rem",
    "164": "41rem",
    "168": "42rem",
    "172": "43rem",
    "176": "44rem",
    "180": "45rem",
    "184": "46rem",
    "188": "47rem",
    "192": "48rem",
    "196": "49rem",
    "200": "50rem",
  },
}

여기까지입니다. 짧고 간단했지만 Tailwind 척도의 작동 방식, 척도에 새 값을 추가하는 방법 및 재사용 방법을 배우는 데 도움이 되었기를 바랍니다. 다음편까지!