[HTML/CSS] Tailwind CSS 다이나믹 클래스 사용시 주의할 점

Tailwind CSS는 클라이언트 사이드 런타임을 포함하지 않는다. 이는 클래스 이름을 빌드 타임에 추출하여 정적인 CSS 파일만 브라우저로 전송하는 것을 의미한다. 즉, 브라우저에선 Tailwind CSS 관련 자바스크립트 코드를 실행하지 않는다. 때문에 Tailwind CSS는 런타임에 동적으로 변경되는 값에 의존할 수 없다. 런타임에 동적으로 값을 변경해야 하는 경우 Emotion 같은 CSS-in-JS 라이브러리 등을 활용해야 한다.

Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client. Use inline styles for these situations, or combine Tailwind with a CSS-in-JS library like Emotion if it makes sense for your project. — 참고

 

다이나믹 클래스 사용 방법

---

❶ 완성된 클래스 이름 사용

// ❌ Don't use string concatenation to create class names
<div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>

// ✅ Do dynamically select a complete class name
<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>

 

❷ 다이나믹 혹은 사용자 정의 CSS 값은 인라인 스타일 사용

// ❌ Arbitrary values cannot be computed from dynamic values
<div class="bg-[{{ userThemeColor }}]"></div>

// ✅ Use inline styles for truly dynamic or user-defined values
<div style="background-color: {{ userThemeColor }}"></div>

 

잘못된 사용 예시

---

Tailwind CSS 클래스는 빌드 타임에 정적으로 추출 가능한 형태로 제공해야 정상적으로 작동한다. 즉, 빌드 타임에 mt-2.5 처럼 완성된 Tailwind CSS 클래스 이름을 제공해야 한다. 아래같이 mt-${expression} 동적으로 작성하면 스타일이 적용되지 않으므로 주의한다.

function HelloWorld({
  greeting = 'hello',
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, '');

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(',') ? (
        ' '
      ) : (
        <span style={{ color: 'grey' }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? '.' : '!'}
    </div>
  );
}