만약 웹 개발 초보자라면, 이 두 CSS 프레임워크가 삭제되었다는 것을 들은 적이 있을 것이다.TailwindCSS가 최근에 특히 유행하고 있다caught on. 그러나 너도 이 오래된 안내를 들어 본 적이 있을 것이다.당신은 무엇을 선택해야 합니까?
둘 다 다른 방법을 취했다.

Bootstrap은 내가 말한 구성 요소 기반의 프레임워크이다.이것은 개발자가 전형적인 사이트나 응용 프로그램을 신속하게 안내하는 데 도움을 주기 위해 미리 만들어진 구성 요소와 간격 등을 위한 실용 프로그램을 포함한다. 다른 비슷한 프레임워크는 Bulma 와 Foundation 이다.

TailwindCSS는 유틸리티 우선 프레임워크입니다.Bootstrap과 달리 일부 유틸리티를 제공하고Tailwind는 모든 유틸리티입니다.핵심 프레임워크에 미리 만들어진 구성 요소가 없기 때문에 구성 요소를 구축해야 합니다.

솔선수범하다

하나의 예는 이러한 차이를 명확히 하는 데 도움이 될 것이다. 만약 우리가 '더 많이 불러오기' 단추가 있는 사진 라이브러리를 만들려고 한다면.

우리는 또한 그것이 호응성을 가지기를 희망하기 때문에 우리의 스마트폰의 작은 스크린에서 갤러리는 하나의 칼럼 구조로 변했다.

인도하다

다음은 Bootstrapcodepen을 사용하여 레이아웃을 구현하는 방법입니다.

<section class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <div class="card mb-4">
        <img src="https://via.placeholder.com/300x200.png" />
        <div class="card-body">
          <p class="card-text">Card Text.</p>
        </div>
      </div>
    </div>
    <!-- repeat 2x... -->
  </div>
  <div class="text-center">
    <button class="btn btn-primary">Load More</button>
  </div>
</section>

CSS 클래스를 보면 Bootstrap의 내장 구성 요소를 알 수 있습니다.

container, row 및 col-* 클래스는 레이아웃에 사용

Bootstrap의 레이아웃은 12개의 단원으로 구성된 격자를 바탕으로 하기 때문에 col-12Bootstrap에 이 열은 container의 전체 폭을 차지해야 한다고 알려준다.이것이 바로 브라우저 창의 크기를 더 작게 조정하면 전체 너비로 확대되는 이유입니다.

col-md-4는 중형(md) 및 이상 화면에서 4개 단원만 사용할 수 있음을 나타낸다.이것이 바로 전형적인 데스크톱 보기에서 (12/4=) 3열을 표시하는 이유입니다.

card와 btn(버튼) 구성 요소는 자명할 가능성이 높다.

또한 Bootstrap의 일부 유틸리티 클래스는 실제 응용 프로그램의 CSS와 매우 비슷합니다.

mb-4 기본적으로 적용margin-bottom: 4rem.

text-center용text-align: center!important.

관찰:

Bootstrap 자체의 구성 요소를 사용할 수 있기 때문에 작성해야 할 것이 적고 실제적으로 알아야 할 CSS도 적다.일부 내장 구성 요소도 자바스크립트의 상호작용을 처리할 것입니다. 예를 들어 accordions나 제가 가장 좋아하는 scrollspy입니다.

프레임워크의 약속에 따라 저희는 구성 요소에 따라 CSS 클래스를 그룹화하고 이름을 짓기 시작할 수도 있습니다.e, g. 나는 CSS/SASS 스타일시트에 chat-message 클래스를 추가하고 chat-message-primary와 같은 수식자를 사용하여 색을 설정할 수 있다.(종류를 어떻게 명명할지 결정하기가 까다롭다면, 그것은! 이 문제를 해결하기 위해 사람들은 BEM라는 완전한 방법을 생각해냈다.)

야외에서

Bootstrap에는 examples 페이지가 있는데 기본적인 레이아웃을 보여 줍니다. 생산 중인 부분curated examples과 official themes을 볼 수 있습니다.

미풍

순풍codepen을 이용하여 만든 유사한 구조:

<section class="flex flex-col">
  <div class="flex flex-col md:flex-row md:justify-center md:space-x-4 items-center space-y-4 md:space-y-0">
    <div class="border border-gray-200 rounded">
      <img src="https://via.placeholder.com/300x200.png" /> 
      <p class="p-5">Card Text.</p>
    </div>
    <!-- repeat 2x... -->
  </div>

  <div class="flex justify-center mt-4">
    <button class="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600">
      Load More
    </button>
  </div>
</section>

Bootstrap은 일부 유틸리티 클래스를 제공하지만 Tailwind core에는 유틸리티 클래스만 있습니다.

레이아웃에 대해 flex와flex-col 등 클래스를 통해 사용flexbox

인터럽트 접두사를 사용하여 응답합니다. 예를 들어 md:flex-row 중간 크기 ("md") 화면이나 더 큰 화면

에서 부드러운 방향을 "줄"으로 변경합니다.

버튼과 같은 구성 요소에 대해 우리는 거의 유틸리티 클래스를 사용하여 CSS를 작성합니다. 예를 들어 다음과 같습니다.

px-4 왼쪽과 오른쪽(x축)에 1rem 채우기를 추가합니다(기본 비율은 안내와 다르다).

bg-blue-500 배경을 중간 파란색으로 설정합니다.

hover:bg-blue-600 누군가가 배경에 걸려 있을 때 배경 색깔이 어두워진다.

관찰하다.

Tailwind를 사용하는 것은 간단한 CSS를 작성하는 것과 거리가 멀지 않다. 이것은 반드시 나쁜 일은 아니다.만약 당신이 일반적인 디자인에서 벗어난 디자인을 사용한다면, Bootstrap 같은 프레임워크는 그다지 도움이 되지 않을 것이다. 결국 대부분의 CSS를 작성할 것이다.Tailwind가 있어서 실용 프로그램 종류 때문에 더욱 쉬워졌습니다.

유틸리티 클래스만 추가하면 HTML에서 벗어나지 않고 모든 스타일 설정을 완성할 수 있습니다.따라서 우리는 CSS 클래스 이름으로 구성 요소를 구축하는 것이 아니라 전방 프레임워크를 통해 구성 요소를 추출하는 것에 의존할 것입니다.Rails에서는 코드를 부분적으로 분해할 수 있습니다.

<%# gallery.html.erb %>
<section class="flex flex-col">
  ...
  <div class="flex justify-center mt-4">
    <%= render partial: "button", text: 'Load More' %>
  </div>
</section>

<%# _button.html.erb %>
<button class="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600">
  <%= text %>
</button>

이것이 좋은 일인지 아닌지에 대한 완전한 논쟁이 있다. 아담 와세임 (Tailwind의 창시자) 의 논점 here 을 읽을 수 있다.

야외에서

Adam Watham의 채널은 순풍의 최상의 실천을 배울 수 있는 절호의 자원이다.그는 (대부분 비용을 지불하는 것) pre-built Tailwind components 을 가지고 있으니, 너는 그것을 기초로 할 수 있다.Rails 개발자에게 그것은 현재 절대로 스포트라이트 아래의 초점이며 심지어 공식tailwind-railsgem도 있다.

그럼 어떤 걸로 할까요?

제 개인적인 견해는:

만약 당신이 새로운 백엔드나'전체 창고'개발자(예를 들어 Rails 개발자)라면, 우선 Bootstrap을 시도해 보십시오. 그들의 내장 구성 요소를 이용하여 스타일을 조정하거나 자신의 구성 요소를 시작할 때 필요할 때만 CSS를 사용하십시오.이렇게 하면 선택한 창고의 다른 부분을 배울 수 있는 시간이 더 많아진다.

만약에 전방 경로를 선택하거나 CSS에 더 익숙하다면Tailwind(또는 프레임이 없거나)는 좋은 선택이다. 왜냐하면 어쨌든 CSS에 익숙해져야 하기 때문이다.나는 개인적으로 나의 새로운 프로젝트를 위해Tailwind를 사용하고 있다. 비록 나는 코드를 어떻게 구축하는지 여전히 생각하고 있지만, 나는 그것을 매우 즐긴다.

만약 당신이 대답하지 않은 문제가 있다면 아래에서 평론을 발표하거나 메일을 보내 주십시오. - 나는 당신의 피드백을 본문에 포함시켜 다른 사람을 돕기를 기꺼이 합니다!