Bootstrap vs Tailwind CSS

Bootstrap은 컴포넌트 기반의 CSS, JS 프레임워크이고, Tailwind CSS는 Utility-First 컨셉의 CSS 프레임워크이다. 무슨 차이인가 하면, 아래 코드를 보면 한 눈에 알 수 있다.

<button class="btn btn-primary">
  클릭하세요
</button>

위 코드에서 보이는바와 같이 Bootstrap은사전에 정의된 클래스를 사용하여 컴포넌트 위주의 스타일을 빠르게 적용할 수 있다.

 

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  클릭하세요
</button>

Tailwind CSS는 이런식으로  Utility 클래스를 조합하여 개별적인 속성에 대해 스타일을 지정하기 때문에 더 유연하고, 커스텀 하기가 용이하다.

 

Bootstrap이 익숙하고 편해서 계속 사용하고 있었는데, 예시 코드를 보니 Tailwind CSS가 더 활용성이 높은 것 같다. 시간이 없고 디자인이 크게 중요하지 않은 프로젝트라면 Bootstrap을 사용하는 것이 좋겠으나, 웬만하면 앞으로는 Tailwind CSS를 사용할 것 같다. 설치하고 시작해보자.

npm install tailwindcss@latest

 

마지막으로 아래는 Tailwind CSS를 더 빠르게 사용할 수 있도록 돕는 치트 시트다. 참고해서 활용하면 유용할 듯.

https://nerdcave.com/tailwind-cheat-sheet