[CSS] tailwindcss 사용기

in SteemCoinPan •  3 months ago 

최근에 svelte 공부를 다시 시작하면서 관련된 라이브러리로 "tailwindcss" 라는 것을 접하게 되었습니다.

HTML 내에 class에 속성을 넣는것만으로 바로 화면에서 변화를 확인 할 수 있는 개념의 CSS 라이브러리입니다.

지금까지는 주로 주어진 Component에 색상이나 기타 속성을 바꾸는 것으로 주로 처리를 하였는데, 여기는 오로지 class 속성만으로 조져버리더군요.

샘플 HTML

메인페이지에 나와있는 샘플 HTML입니다.

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

class에 보이는 값들로 대략적인 CSS 속성들이 감이 잡히더라구요.
처음에는 조금 복잡한 버튼의 경우 class 속성이 20여개씩이나 막 들어가 있어서.. 헉!!! 하기도 했었는데, 그래도 어떤 속성들이 적용되었는지 class에서 바로 확인이 가능하니 한편으로 나쁘지 않다는 생각도 들었습니다.

그래서 이번에 시작하는 프로젝트는 SVELTE와 TAILWINDCSS 조합으로 도전을 해보려고 합니다..!!

뭐든 실제로 써봐야 장단점을 알 수 있으니.. ㅎㅎ 하고 보는 것이지요!!

이번에 만드는 제품이 무엇이 될지!!!!??? 저도 아직 잘 모르기에.. 뭐라고 말씀 드릴 수가 없겠군요. ㅎㅎ

이번 프로젝트는 중간에 처지지 말고!!! 잘해내길 바래봅니다! ㅎㅎ

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:  

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 35.37%, steem power : 1812483.81, STU KRW : 1200.
@happyberrysboy staking status : 12340 KRWP
@happyberrysboy limit for KRWP voting service : 12.34 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 41.82 KRWP [55741497 - 144168ed92ea6cf8ec8e75438dac8b2c7ab98be1]