TailWind에서 CSS에 선언해 사용하는법

TailWind는 편리하다 미리 선언되어 있는 값들을 넣기만 하면 되니 말이다.

 

그러나 똑같은 스타일을 계속 넣게 되면 똑같은 값들을 길게 주욱 넣어야 한다.

 

<button className="w-300 border-2 border-green-950 rounded hover:bg-green-500 bg-green-300">추가</button>
<button className="w-300 border-2 border-green-950 rounded hover:bg-green-500 bg-green-300">삭제</button>
<button className="w-300 border-2 border-green-950 rounded hover:bg-green-500 bg-green-300">기능</button>

이런식으로 말이다.

 

이걸 한번 선언하고 사용하면 

<button className="btlStyle">추가</button>
<button className="btlStyle">삭제</button>
<button className="btlStyle">기능</button>

<style>
.btlStyle {
  @apply w-300 border-2 border-green-950 rounded hover:bg-green-500 bg-green-300;
}
</style>

마음이 편안해 진다.

 

그렇지만... TailWind의 개발 방향과 약간 다르기도 하다.......