tailwind란
tailwind란 한마디로 뚱뚱한 css 유틸이다.
미리 css을 정의해두어 익숙해지면, 빠르게 원하는 결과물을 만들어 낼 수 있다.
사용 예시
<div className="bg-white p-6 rounded-3xl shadow-xl">
<span className="font-semibold text-2xl">Select Item</span>
<div className="flex justify-between my-2">
<span className="text-gray-500">Grey Chair</span>
<span className="font-semibold">$19</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Grey Chair</span>
<span className="font-semibold">$19</span>
</div>
<div className="flex justify-between mt-2 pt-2 border-t-2 border-dashed">
{/** border-style: dashed */}
<span>Total</span>
<span className="font-semibold">$10</span>
</div>
<div
className="mt-5 bg-blue-500 text-white p-3
text-center rounded-xl w-2/4 mx-auto
"
>
Checkout
</div>
</div>
위와 같이 class을 조합하여 스타일한다.
특징과 참고 자료
부트스트랩에서는 사용한 사이트를 가면 사용여부를 알 수 있지만, 이와 다르게 정해진 사양이 없어서 자유롭다.
허나 class를 사용한다는 점에서 가독성이 떨어지므로 tailwind-styled-components를 사용하는 것도 좋을 것 같다.
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.