tailwind CSS에 template literals 사용시 주의점.

사진과 같이 아이콘을 원 형태로 배치를 하고 싶어서

li 각 요소마다 rotate를 걸어주고, 각도는 다 다르게 설정을 하고 싶었다.

아이콘 원형 배치

 

아래와 같이 코드를 작성하니 전혀 동작을 하지 않았다.  각도(변수 deg)를 계산하여 생성하고 rotate-[각도 deg]를 className에 넣고 싶었다. deg를 console로 찍어보니 잘 생성되고 있고, 혹시나 hoisting 때문에 안 되는 것인가 싶어서 deg값이 있을 때 li 요소를 생성하게 했는데 되지 않았다.

const iconSet: string[] = [
    "home-outline",
    "person-outline",
    "settings-outline",
    "mail-outline",
    "videocam-outline",
    "key-outline",
    "game-controller-outline",
    "camera-outline",
  ];
  
{iconSet.map((name, index) => {
          let deg: number = (360 / iconSet.length) * (index + 1);
          if (deg) {
            return (
              <li
                key={index}
                className={`absolute origin-140 rotate-[${deg}deg] right-[124px] translate-x-10`}
              >
                <button>
                  <ion-icon name={name} class="hydrated"></ion-icon>
                </button>
              </li>
            );
          }
 })}

원인은 공식문서를 안 읽어본 나였다.

공식 문서를 첨부한다.

https://tailwindcss.com/docs/content-configuration

Content Configuration - Tailwind CSS

Class detection in-depth 부분을 읽어 보면 완전한 문자열로 있을 때만 CSS를 생성할 수 있다고 되어 있다.

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

즉 내 코드에서 template literals로 작성한 rotate-[${deg}deg] 이 부분을 완전체로 넣어야 한다는 의미인 것 같다.

 

따로 배열을 생성하지 않고 해결을 하고 싶었는데, 내 머리로는 방법이 없는 것 같다. 따라서 아래와 같이 수정하여 해결하였다.

const rotateSet = [
  "rotate-[45deg]",
  "rotate-[90deg]",
  "rotate-[135deg]",
  "rotate-[180deg]",
  "rotate-[225deg]",
  "rotate-[270deg]",
  "rotate-[315deg]",
  "rotate-[360deg]",
];

{
  iconSet.map((name, index) => {
    return (
      <li
        key={index}
        className={
          active
            ? `absolute origin-[100px] ${rotateSet[index]} -translate-x-[86px] opacity-100 transition duration-500 z-10 text-2xl`
            : "hidden opacity-0 transition duration-500"
        }
      >
        <button>
          <ion-icon name={name} class="hydrated"></ion-icon>
        </button>
      </li>
    );
  });
}

혹시 rotateSet과 같이 배열을 생성하지 않고, 계산으로 문제를 해결하는 방법을 아시다면 답글 달아주시면 정말 감사하겠습니다.