tailwind css 색상설정

2024/05/12

안녕하세요 lika-7 입니다

이번시간에는 tailwind css 의 색상설정 방법을 다루겠습니다

tailwind CSS 색상 클래스

 

무채색 이름 규칙

• 접두사-색상명/불투명도

• 불투명도는 생략 가능합니다
•  접두사는
  • 색상을 의미하는 bg
  • 택스트 색상을 의미하는 text
  • 경계 색상을 의미하는 border를 이용할수 있습니다
• bg-black/70

유채색 이름 규칙

• 접두사-색상명-채도/불투명도

• 채도는 50, 100, 200, 300, 400, 500, 600, 700, 800, 900

const Color = () => {
  return (
    <div className="p-4 bg-sky-200">
      <p className="w-full p-4 text-3xl text-white">Color</p>
      <div className="mb-4">
        <p className="text-white">Email address</p>
        <input type="email" className="text-gray-900 border-sky-200 border-4" />
        <p className="text-rose-500">This field is required</p>
      </div>
    </div>
  );
};

export default Color;