TIL 2021-11-13 Tailwind CSS// input type file

Tailwind CSS는 쉽게 인라인 css를 만들수 있는 라이브러리다.

 

이와 비교군에 있는것이 Materialize CSS, Bootstrap이 있을텐데,

 

이 두개와는 조금 다른것이 Bootstrap과 Materialize같은 경우는 미리 정의된 컴포넌트들을 사용하거나 커스텀하는 느낌이라면, Tailwind CSS는 그런 컴포넌트 없이 CSS Helper로써의 기능을 충실히 수행해주는 느낌이다.

 

부트스트랩 같은 경우에는 이미 만들어진 컴포넌트들이 있다는 것이 장점이자 단점인데, 별도의 CSS 수정 없이도 이미 깔끔하고 이쁘게 만들어진 컴포넌트를 바로 사용할 수 있다는 강력한 장점이 있지만, 반대로 부트스트랩으로 만든 사이트들은 전부 비슷한 디자인이라는 생각을 받을수도 있다.

 

만약 Bootstrap 같은 라이브러리를 사용하면서 디자인을 변경하고 싶다면 override를 하기 위해 또 다른 코드들을 계속 작성해줘야하는데, 이는 CSS 프레임워크를 사용하는 의미가 다소 퇴색될 수 있다.

 

 

 

 

말로만 해서는 이해가 잘 안가니 실제 테일윈드의 코드를 보자.

 

https://tailwindcss.com/docs/display

 

 

<div class="space-y-4 ...">
  <span class="block ...">1</span>
  <span class="block ...">2</span>
  <span class="block ...">3</span>
</div>

이런 식으로 클래스명에 block을 작성하여 display:block을 사용할 수 있다.

 

<div style="display:block;"/>
<div class="block"/>

위와 같은 차이가 있다.

 

당장 이 코드만 보면 약간의 차이라고 느낄 수도 있는데,

 

padding같은 경우에는 px-4 (padding-left: 1rem; padding-right: 1rem;)으로 확 줄일수가 있다.

 

 

<div style="display:block;padding-left: 1rem; padding-right: 1rem;"/>
<div class="block px-4"/>

위의 블럭 클래스와 합쳤을떄의 차이는 훨씬 극단적이다.

 

https://tailwind-elements.com/

Tailwind Elements - Bootstrap components recreated with Tailwind

미리 만들어진 컴포넌트가 없다는 단점 떄문에 망설일수도 있는데, 위의 사이트에서 대체로 사용할만한 요소들은 미리 tailwind를 통해서 짠 것이 있으니 참고하면 된다.