Tailwind가 다른 css 라이브러리에 비해 가지는 장점은 단연코 ‘유틸리티 클래스’를 활용한 유연한 스타일링이라고 생각다. 기존 v3에서는 아래와 같이 tailwind.config.js 파일에 전역 스타일링을 정의해야 했다.만 v4부터는 이런 과정을 더욱 간단히 수행하는 방법을 제공함으로써, css만으로 바로 커스텀이 가능하게 되었다.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,jsx,tsx}"],
  theme: {
    extend: {
      textColor: {},
      fontSize: {},
      colors: {
        black: "#111111",
        primary: "#9f1239", // 주색상
        secondary: "#be123c", // 부색상
        skeleton: "#d1d5db", // 로딩 스켈레톤 색상
      },
    },
  },
};

🤔개념

@import "tailwindcss";

@theme {
  --color-dark: #111111;
  --color-primary: #1d2745;
  --radius-button-default: 5px;
}

@layer base {
  body {
    font-family: "Noto Sans KR";
  }
}

@layer components {
  .text-field > p {
    @apply absolute;
  }
  .navigation-title-wrapper button {
    @apply mr-[7px];
  }
}

@layer utilities {
  .text-xl {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0px;
    font-weight: 600;
  }
  .text-2xl {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0px;
    font-weight: 700;
  }
  .flex-row-center {
    @apply flex flex-row items-center;
  }
  .flex-col-center {
    @apply flex flex-col items-center;
  }
}

Arbitrary values 사용하기

@layer components {
  .navigation-title-wrapper button {
    @apply mr-[7px];
  }
}

tailwind가 제공하는 유틸리티 클래스로는 프로젝트에서 정의된 spacing을 적용할 수 없는 경우가 생길 수 있다. 이때, 사용자 지정값을 [] 내부에 정의할 수 있다. 이러한 스타일링 방식은 Tailwind가 JIT(Just-in-Time)으로 동작하기 때문에 가능하다.

JIT (Just-in-Time)

JIT는 실제 사용한 유틸리티 클래스만 실시간으로 스캔하여 필요한 CSS를 즉석에서 생성하는 방식이다. v2.1에서 도입된 이 기능은 v3부터는 기본 엔진으로 통합되었다. 따라서, v4를 사용한다면 별도 설정이 필요없다.

• 장점
  • 빠른 빌드: 개발 중 추가된 클래스에 대해 즉시 스타일이 반영된다.
  • 작아진 파일 사이즈: 실제로 사용되는 유틸만 포함되기 때문에 프로덕션 환경에서의 CSS 파일이 최소화된다.
  • Arbitrary 값 지원: [] 내에 사용자가 직접 스타일링을 지정하는 것을 허용한다.

directives(지시어) 활용하기

@theme

@theme {
  --color-primary: #1d2745;
  --color-secondary: #1de5d4;
  --radius-primary-button: 5px;
}

프로젝트 전역으로 사용할 사용자 지정 유틸리티 클래스를 정의하고 싶을 수 있다. @theme 로 내에 스타일을 정의하면 이를 실현할 수 있으며, 이는 추후에 프로젝트에 전역으로 사용된 스타일링의 일관된 변경 시 유용하다. 접두어(?)로 사용할 수 있는 것들을 정리한 목록을 공식문서에서 확인할 수 있다.

Theme variables - Core concepts

@apply

/* 기존 유틸리티 클래스를 사용자 지정 CSS에 추가함. */
.flex-row-center {
  @apply flex flex-row items-center;
}

flex, grid와 같은 레이아웃 시스템이나 transform을 활용한 중앙 정렬 등 반복되는 스타일링이 프로젝트 곳곳에서 사용될 수 있다. 이때, @apply 는 유틸리티 클래스를 조합하여 반복을 줄이는 효과를 준다.

@layer

스타일 우선순위를 관리하는 3단계 ‘바구니’로써 작용한다. base → components → utilities 순으로 적용되고, 뒤로 갈수록 우선순위가 높아진다. layer를 사용하여 아래의 base, components, utilities에 모두 적용할 수 있다.

• base: 특정 html 요소에 대한 스타일링을 프로젝트 전역으로 지정할 수 있다.

  @layer base {
  	h1 {
  		font-size: var(--text-2xl);
  	}
  	h2 {
  		font-size: var(--text-xl);
  	}
  }
  	

• components: 카드, 푸터 등 재사용 가능한 특정 컴포넌트에 적용될 스타일링을 지정한다.

  @layer components {
  	.card {
  		background-color: var(--color-white);
  		border-radius: var(--rounded-lg);
  		padding: var(--spacing-6);
  		box-shadow: var(--shadow-xl);
  	}
  }

• utilities: margin, padding, typography,colors 등 atomic한 스타일링을 재정의할 수 있다.

  @utility content-auto {
  	content-visibility: auto;
  }

  /* 위에서 @apply로 지정한 스타일을 @utility로도 정의 가능함. */
  @utility flex-row-center {
    @apply flex flex-row items-center;
  }

@utility

특정 tailwind 유틸리티 클래스에 대한 atomic style을 지정한다. tailwind에서 정의한 것을 프로젝트에 맞게 커스텀할 때 활용될 수 있을 것이다.

@layer utilities {
  .text-xs {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0px;
    font-weight: 400;
  }
}

@utility text-xs {
	font-size: 12px;
  line-height: 18px;
  letter-spacing: 0px;
  font-weight: 400;
}

😎실습

CLS(Cumulative Layout Shift) 방지하기

여러 input이 나열되어 있는 상태에서 에러 메시지로 인해 레이아웃 밀림 현상이 발생한 것을 본 적이 꽤 있을 것이다. 이때, 이를 방지하기 위해서는 absolute(부모) > relative(자식) 의 position을 지정해주면 간단히 해결할 수 있다. 하지만 아래 코드에서는 에 relative를 직접 부여하기에는 확장성이 떨어지고,

return (
  <div>
    <input />
    {isError && <ErrorMessage>{errorMessage}</ErrorMessage>}
  </div>
);

@layer components {
  .text-field > p {
    @apply absolute;
  }
}

return (
  <div className="relative text-field">
    <input />
    {isError && <ErrorMessage>{errorMessage}</ErrorMessage>}
  </div>
);