[Tailwind Css] Colors

Text Color

진하기

text-color-

text-color로 색깔을 줄 수 있다.

50이 가장 연한색, 900이 가장 진한 색이다.

<p className={"text-red-50"}>Tailwind Css 학습</p>
      <p className={"text-red-100"}>Tailwind Css 학습</p>
      <p className={"text-red-200"}>Tailwind Css 학습</p>
      <p className={"text-red-300"}>Tailwind Css 학습</p>
      <p className={"text-red-400"}>Tailwind Css 학습</p>
      <p className={"text-red-500"}>Tailwind Css 학습</p>
      <p className={"text-red-600"}>Tailwind Css 학습</p>
      <p className={"text-red-700"}>Tailwind Css 학습</p>
      <p className={"text-red-800"}>Tailwind Css 학습</p>
      <p className={"text-red-900"}>Tailwind Css 학습</p>

색깔 바꾸기

text--500

<p className={"text-red-500"}>Tailwind Css 학습</p>
<p className={"text-orange-500"}>Tailwind Css 학습</p>
<p className={"text-yellow-500"}>Tailwind Css 학습</p>
<p className={"text-green-500"}>Tailwind Css 학습</p>
<p className={"text-blue-500"}>Tailwind Css 학습</p>
<p className={"text-purple-500"}>Tailwind Css 학습</p>
<p className={"text-black-500"}>Tailwind Css 학습</p>

 

배경 색깔

bg-color-400

<p className={" bg-red-500"}>Tailwind Css 학습</p>
<p className={"bg-orange-500"}>Tailwind Css 학습</p>
<p className={"bg-yellow-500"}>Tailwind Css 학습</p>
<p className={"bg-green-500"}>Tailwind Css 학습</p>
<p className={"bg-blue-500"}>Tailwind Css 학습</p>
<p className={"bg-purple-500"}>Tailwind Css 학습</p>
<p className={"bg-black-500"}>Tailwind Css 학습</p>

 

밑줄 색깔

underline decoration

<p className={"underline decoration-red-500"}>Tailwind Css 학습</p>
<p className={"underline decoration-orange-500"}>Tailwind Css 학습</p>
<p className={"underline decoration-yellow-500"}>Tailwind Css 학습</p>
<p className={"underline decoration-green-500"}>Tailwind Css 학습</p>
<p className={"underline decoration-blue-500"}>Tailwind Css 학습</p>
<p className={"underline decoration-purple-500"}>Tailwind Css 학습</p>
<p className={"underline decoration-black-500"}>Tailwind Css 학습</p>

border

<input className={"border border-red-500"}></input>
<input className={"border border-orange-500"}></input>
<input className={"border border-yellow-500"}></input>
<input className={"border border-green-500"}></input>
<input className={"border border-blue-500"}></input>
<input className={"border border-purple-500"}></input>
<input className={"border border-black-500"}></input>

divide

아이템과 아이템 사이에 구분선(border)처리를 해준다.

<div className={"divide-y"}>
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
  <div>Item4</div>
  <div>Item5</div>
</div>

사이의 구분선 색을 바꿀 수 있다(divide-blue-300)

<div className={"divide-y divide-blue-300"}>
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
  <div>Item4</div>
  <div>Item5</div>
 </div>

Outline

outline

outline

<button className={"outline outline-red-500"}>버튼</button>
<button className={"outline outline-orange-500"}>버튼</button>
<button className={"outline outline-yellow-500"}>버튼</button>
<button className={"outline outline-green-500"}>버튼</button>
<button className={"outline outline-blue-500"}>버튼</button>
<button className={"outline outline-purple-500"}>버튼</button>

shadow

shadow-lg shadow-red-500

<button className={"outline shadow-lg shadow-red-500"}>버튼</button>
<button className={"outline shadow-lg shadow-orange-500"}>버튼</button>
<button className={"outline shadow-lg shadow-yellow-500"}>버튼</button>
<button className={"outline shadow-lg shadow-green-500"}>버튼</button>
<button className={"outline shadow-lg shadow-blue-500"}>버튼</button>
<button className={"outline shadow-lg shadow-purple-500"}>버튼</button>

shawdow-lg, -뒤에 있는 lg, sm를 통해서 그림자의 강도를 조절할 수 있다.

shadow-lg

<button className={"outline shadow-sm shadow-red-500"}>버튼</button>
<button className={"outline shadow-md shadow-red-500"}>버튼</button>
<button className={"outline shadow-lg shadow-red-500"}>버튼</button>
<button className={"outline shadow-xl shadow-red-500"}>버튼</button>
//내부로 그림자 넣기
<button className={"outline shadow-inner shadow-red-500"}>버튼</button>

Accent Color

accent-red-500

<input type={"checkbox"} className={"accent-red-500"} checked></input>
<input type={"checkbox"} className={"accent-orange-500"} checked></input>
<input type={"checkbox"} className={"accent-yellow-500"} checked></input>
<input type={"checkbox"} className={"accent-green-500"} checked></input>
<input type={"checkbox"} className={"accent-blue-500"} checked></input>
<input type={"checkbox"} className={"accent-purple-500"} checked></input>

Arbitrary Colors

직접 컬러값을 설정할 수도 있는데

<div className={"bg-[#427fab]"}>hello</div>
<div className={"bg-[rgb(255,0,0)]"}>hello</div>
<div className={"bg-[steelblue]"}>hello</div>

이런식으로도 설정 가능하다.