TailwindCSS 팁: 유틸리티 클래스의 임의 값

저는 현재 이 블로그(출시 예정)를 재설계하고 있으며 TailwindCSS를 사용하여 대부분의
무거운 물건 들기. TailwindCSS가 모든 사람을 위한 것은 아니지만 훌륭한 도구라고 생각합니다. 를 할 수있는
유틸리티 클래스를 사용하여 사이트의 새 버전을 신속하게 디자인하는 것은 정말 즐거웠습니다. CSS 만 사용하는 것에 대해 거의 말하지 않는 것입니다.

TailwindCSS에 대해 블로그(및 최근에 발표한 내 최근 릴리스Pluralsight Course)에서 꽤 많이 이야기했지만 작동하는 것을 깨닫지 못한 한 가지는 TailwindCSS의 "일회성 값"이었습니다.

내가 의미하는 바를 보여 드리겠습니다.

<div class="md:h-screen 
          bg-gray-900 
          text-gray-200 
          md:sticky 
          md:top-0" 
          id="sidebar">
  <aside class="p-2 
                md:flex 
                md:flex-col 
                md:h-full">
    <div class="md:flex-grow hidden md:block"></div>
    <div>
      <a href="/"
        ><img
          src="/img/headshots/shawn-head-sm.jpg"
          data-src="/img/headshots/shawn-head.gif"
          class="lazy 
                 rounded-full 
                 border-2 
                 border-transparent 
                 shadow-md 
                 shadow-gray-700 
                 hover:border-gray-500 
                 hidden md:block 
                 w-40 
                 mx-auto"
          alt="Headshot"
      /></a>

내 새 사이트에서 사이드바는 페이지의 명명된 개체입니다. 내가하고 싶었던 것은 너비를 특정 크기로 설정하는 것입니다. 기본 제공 값 중 하나를 사용하여 이를 수행할 수 있습니다.

<div class="md:h-screen 
          bg-gray-900 
          text-gray-200 
          md:sticky 
          md:top-0
          w-56" 
          id="sidebar">

w-56는 단순히 너비를 14rem으로 설정합니다(56/4 = 14, 기본적으로 번호 매기기 시스템의 각 값은 1/4 rem에 해당). 하지만 그 크기는 정확하지 않았습니다. 정확히 14.5rem이 필요합니다. 그리고 기본 TailwindCSS 클래스에는 이에 대한 값이 없습니다. 한 가지 접근 방식은 간단히 CSS에 값을 추가하는 것입니다.

  #sidebar {
    width: 14.5rem;
  }

그러나 이는 많은 수작업 유지 관리로 이어집니다. TailwindCSS 구성을 확장하여 구체적으로 정의할 수 있습니다.

module.exports = {
  content: [
    "content/**/*.{md,html}"],
  theme: {
    extend: {
      width: {
        "54": "14rem"
      },

하지만 전체 테마를 하나의 일회성 크기로 확장하는 것은 지나친 것 같습니다. 이 트릭은 실제로 TailwindCSS의 유틸리티 클래스로 특정 값을 지원하기 위한 것입니다. 수정 사항은 크기를 추가하는 것입니다(TailwindCSS는 이에 대한 유틸리티 클래스를 생성함).

<div class="md:h-screen 
          bg-gray-900 
          text-gray-200 
          md:sticky 
          md:top-0
          w-[14.5rem]" 
          id="sidebar">

그w-[14.5rem]는 TailwindCSS 컴파일러에게 특정 이름과 특정 값을 가진 클래스를 생성하도록 지시합니다. 결과는 다음과 같습니다.

.w-\[14\.5rem\]{
  width: 14.5rem;
}

이것은 이 일회성 값과 관련이 있습니다. spacing 시스템을 사용하는 거의 모든 유틸리티 클래스에 대해 이를 수행할 수 있습니다. 예를 들어:

<div class="w-[200px] 
            h-[30rem]
            pl-[1px]
            mt-[10px]
            tracking-[.001rem]">
</div>

이는 임의 값의 이점을 얻을 수 있는 다른 유형의 속성으로 확장됩니다.

<div class="bg-[url(img/somebackground.png)] 
            before:content-['add']
            text-[#FFEEDD]">
</div>

이것이 CSS 또는 인라인 스타일 해결 방법을 피하는 데 얼마나 도움이 되는지 확인할 수 있습니다. 한 가지 유의할 점은 유틸리티 클래스 이름에 공백이 없어야 하지만 밑줄(_)을 사용하여 공백을 바꿀 수 있다는 것입니다.

<div class="before:content-['add_more']">
</div>

이렇게 하면 이전 내용이 add more 로 설정되지만 밑줄이 정말 필요한 경우 이스케이프할 수 있습니다.

<div class="before:content-['add\_more']">
</div>

이렇게 하면 이전 콘텐츠가 add_more 로 설정됩니다.

임의의 값은 전체 클래스 또는 CSS 규칙이 필요하지 않고 일회성 값이 필요할 때 실제로 도움이 됩니다. 도움이 되었기를 바랍니다.

You can watch my full TailwindCSS course on Pluralsight here: TailwindCSS 3 Fundamentals

Shawn Wildermuth의 이 저작물은 Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License에 따라 라이선스가 부여되었습니다.
wildermuth.com의 작업을 기반으로 합니다.


이 기사가 마음에 들면 Pluralsight에서 Shawn의 과정을 참조하십시오.