Tailwind - 컬러 및 배경, 보더 처리

 

Tailwind - 컬러 및 배경, 보더 처리

#Web/CSS

배경색 설정(background-color)

<div class="bg-blue-500 p-6 text-white">
  배경색이 파란색입니다.
</div>
<div class="bg-gray-100 p-6 text-black">
  배경색이 연한 회색입니다.
</div>

텍스트 색상 설정(text-color)

<p class="text-red-500">이 문장은 빨간색 텍스트입니다.</p>
<p class="text-green-500">이 문장은 녹색 텍스트입니다.</p>
<p class="text-blue-600">이 문장은 파란색 텍스트입니다.</p>

보더 스타일 설정(border)

보더 두께, 색상, 모양 등을 쉽게 설정할 수 있다.
예: border, border-2, border-gray-300, rounded-lg, rounded-full

<div class="border border-gray-300 p-6 rounded-lg">
  이 상자는 회색 보더와 둥근 모서리를 가지고 있습니다.
</div>
<div class="border-2 border-blue-500 p-6 rounded-full">
  이 상자는 파란색 보더와 완전히 둥근 모서리를 가지고 있습니다.
</div>

Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복