[CSS][Tailwind] 기타 Tailwind를 사용할 때 알아두면 좋은 것들

Tailwindcss를 사용할 때 알아두면 좋은 잡다한 사항들에 대해 정리합니다.

투명도 별도 적용하기

기본적으로 css는 투명도가 누적 적용됩니다.

 

이 말은 부모 요소에서 90%의 투명도를 적용한다면,

 

자식 요소에서 100%의 투명도(=투명도 없음)을 적용해도 여전히 90%의 투명도로 적용된다는 뜻입니다.

 

때문에 투명도를 별개 적용하려면 opacitiy보다는 rgba의 값으로 background를 설정해야 하는데,

 

tailwind에서는 아래와 같이 rbga값을 간단하게 나타낼 수 있습니다.

<div className="bg-main/90">
...
</div>

이는 main이라는 색상에 90%의 alpha(=투명도)값을 적용한다는 뜻입니다.