[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"
    )}
>


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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

image.png

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 19.40%, steem power : 1917860.29, STU KRW : 1200.
@happyberrysboy staking status : 13840 KRWP
@happyberrysboy limit for KRWP voting service : 13.84 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 46.491 KRWP [61334686 - 03467bbc840da2d18ae2005066cd225cee7f9039]

impressive!