React+Tailwind에서 calc 사용하기

Tailwind는 많은 값들이 정해져 있어서 사용이 편하기는 한데, 가끔 이렇게 계산을 해서 컴포넌트의 css를 조절해야할 때가 있다. 이럴 때는 어떻게 해야할까?

보통의 경우라면 React에 Tailwind를 적용하기 위해 tailwind.config.js 파일을 생성하셨을 겁니다. 거기에 아래와 같은 코드를 추가해줍니다.
다른 key-value들은 생략한 것이므로 당황하지않기!

module.exports = {
  // calc를 사용할 수 있게 만들어준다.
  mode: "jit",
};

이러면 calc를 사용할 수 있다.
예를 들어,

<nav className="absolute w-screen pt-5 bg-white group-hover:block top-[57px] left-[calc(50px-300px)]">
  </nav>

className 가장 뒷 부분에 이런 코드가 있다.

left-[calc(50px-300px)]

이런 식으로 사용하시면 calc를 사용할 수 있습니다!

참고 자료

참고자료1
참고자료2