tailwind calc() 함수 대체 방법

삽질 엄청 많이 했다 ^^

사실 규격에 딱딱 맞춰서 하게 된다면 문제가 없지만,,,,

 

개인프로젝트로 피그마도 구현하면서 작성하려니,, 하하..


각설하고 본론으로 돌아가자면

 

이 방법을 썼다

 

...
<div className="h-[calc(100%-theme(spacing.mobile))]">
 	{children}
 </div>
 ..

 

헤더와 푸터를 둘다 이용하여 나는 children에 헤더 푸터의 높이를 뺀값을 전달해주고 싶었다

 

나도 계속 삽질을 했고....ㅎ

 

당연하게도 계속 calc() 함수 적용이 왜 안되는지 검색만 했었다

 

 

 

 

 

공식 문서로도 확인했지만 여러 블로그 등을 전전했고 결국 확인해본 결과 공식문서가 참으로도 이해가 어려웠지만 finally!!!!!!

 

 

추가로 global.css에다가 아래의 코드도 추가하였다

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  @apply h-full w-full;
}

 

 

위에다가 작성해둔 mobile theme는 아래와 같이 작성하였다

tailwind.config.ts

theme: {
...
  spacing: {
        web: "",
        mobile: "적용하고싶은 크기",
      },
...
},

 

 

오늘의 삽질 끄읕....

 

 

https://tailwindcss.com/docs/upgrade-guide#negative-values-removed

Upgrade Guide - Tailwind CSS