[Tailwindcss] 자주 사용 되는 종류 몇가지

Tailwindcss 에서 자주 사용되는 패턴들이 있어서 해당 부분은 좀 정리를 해보려고 합니다.

Tailwindcss의 경우 className의 길이가 엄청나게 길어지는 경우가 많기 때문에, 자주 사용되고, 주로 세트로 같이 다니는 className들은 따로 정리를 해두고 다니는 것도 좋을 듯 합니다.

---

focus 상태에서의 outline 꾸미기

• 아래 이미지처럼 컴포넌트가 활성화 되면 바깥에 예쁜 동그라미로 표시를 해줍니다.

// 포함되는 class들
"focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"

앞쪽에 @나 $ 같은 마크 넣는 방법

• 아래 이미지처럼 앞쪽에 특수 기호나 아이콘을 넣고 전체적으로 둥그렇게 표시하는 방법입니다.

<div className="flex mt-7 w-full">
    <div className="px-2 pointer-events-none flex items-center justify-center border-none rounded-l-md bg-gray-400">
    <span className="text-gray-600 text-sm">@</span>
    </div>
    <div className="w-full">
    <input
        className="px-2 w-full border-r-2 rounded-l-none rounded-r-md text-lg focus:outline-none lowercase"
        type="text"
        placeholder="Enter your account"
        value={account}
        onChange={onInputAccountChange}
    />
    </div>
</div>

머리말 처럼 작은 tag 표시

• 아래 이미지처럼, 작은 머리말 느낌의 컴포넌트 넣는 방법!

<span className="flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-900">
  동네질문
</span>

구석에서 떠다니는 입력 버튼

• 모바일에서 아래 이미지처럼 구석탱이에서 계속 따라다니는 작성 버튼구현!

<button className="fixed bottom-24 right-5 bg-orange-400 rounded-full p-4 text-white shadow-xl hover:bg-orange-500 cursor-pointer transition-colors duration-300">
  <svg
    className="w-6 h-6"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
    ></path>
  </svg>
</button>

tailwindcss className 설정용 보조 함수

• 위에서 말했듯이 tailwind는 classname이 아주 길어지는 경우가 많이 흔합니다.
• 그러다보니 vscode에서 가로로 텍스트가 많이 길어지는 경우가 발생하여, 가독성이 떨어 지는 단점이 있습니다.
• 그래서 아래와 같은 클래스를 만들고, JSX에서 조금 더 보기 쉽게 표시할 수도 있습니다.
• 조건문도 조금은 보기 좋게 표현이 가능하고, ,표로 클래스를 추가 하면 되어서 적당한 그룹끼리 묶어서 보기 좋게 나열이 가능합니다.

// tailwind용 보조 함수
function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

// JSX
<a className={classNames(
        active ? "bg-gray-100" : "",
        "block px-4 py-2 text-sm text-gray-700"
    )}
>

---

추가로 더 많은데, 기회가 되면 계속 업데이트 해야겠습니다..!!