[CSS/React] tailwind 에서 calc 사용하기

 

 

💡 tailwind 에서도 calc 사용이 가능했다!

 

.example {
    font-size: calc(2vw + 10px); /* viewport width에 따라 크기 조절하면서 10px를 추가 */
    padding: 20px; /* 고정된 크기로 픽셀 단위 사용 */
    margin: calc(1vw + 5px) calc(2vw + 10px); /* 세로는 viewport width에 따라, 가로는 픽셀 단위로 사용 */
    width: calc(50% + 20px); /* 백분율로 지정하면서 20px를 추가 */
}

 

원래 요렇게 쓰는 calc .. tailwind 에서 써보자!

 

 

저 바(8vh)에 보더를 주고 안에 빨간 박스(8vh)를 채워놨는데

border-box 가 적용되어 있어서 빨간 박스가 보더를 가려버렸다. 🥲

 

그래서 2px 만 빼고싶은데~~~ 하다가

tailwind 에 calc 가 지원이 되나 하고 찾아봤더니 다행히 사용이 가능했다!

 

🎀 사용법

// 빨간 박스 div
<div className="h-[calc(8vh-2px)] bg-pointColor2" style={{ width: `${lifePercentage}%` }}></div>

 

px 나 % 를 정해줄 때 쓰던 괄호 안에 calc 를 써주면 된다!

style 이랑 className 을 합치려 했는데 실패했다..

 

 

tailwind 랑 다른 CSS 방식들이 작성법이 많이 달라서..

첨에 좀 애먹지만 그래도 거의 모든 CSS 기능?이 제공되는 거 같다..

아무튼 성공..!