tailwind css

 

tailwind란 한마디로 뚱뚱한 css 유틸이다.

미리 css을 정의해두어 익숙해지면, 빠르게 원하는 결과물을 만들어 낼 수 있다.

 

      <div className="bg-white p-6 rounded-3xl shadow-xl">
        <span className="font-semibold text-2xl">Select Item</span>
        <div className="flex justify-between my-2">
          <span className="text-gray-500">Grey Chair</span>
          <span className="font-semibold">$19</span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-500">Grey Chair</span>
          <span className="font-semibold">$19</span>
        </div>
        <div className="flex justify-between mt-2 pt-2 border-t-2 border-dashed">
          {/** border-style: dashed */}
          <span>Total</span>
          <span className="font-semibold">$10</span>
        </div>
        <div
          className="mt-5 bg-blue-500 text-white p-3
          text-center rounded-xl w-2/4 mx-auto
         "
        >
          Checkout
        </div>
      </div>

 

 

위와 같이 class을 조합하여 스타일한다.

 

부트스트랩에서는 사용한 사이트를 가면 사용여부를 알 수 있지만, 이와 다르게 정해진 사양이 없어서 자유롭다.

 

허나 class를 사용한다는 점에서 가독성이 떨어지므로 tailwind-styled-components를 사용하는 것도 좋을 것 같다.

 

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

tailwind-styled-components