저는 Tailwind CSS로 Bootstrap 사이트를 새로 만들었습니다. 여기는 다른 점입니다.

본문은 최초로 발표되었다my personal blog
모든 웹 개발자는 Bootstrap부터 시작한다.그것은 사용하기 쉽고 사이트를 만드는 많은 시간을 절약했다.초보자든 고급 개발자든 안내는 모든 웹 개발자가 의존하는 필수 조건이다.
그러나 최근에 나는 Tailwind CSS에 관한 소식을 많이 들었다.나는 줄곧 트위터에서 사람들과 글이 그것에 대해 이야기하는 것을 보았는데, 나는 매우 궁금해서 한번 시도해 보고 싶다.
그래서 저는 sButtons를 위해 사이트를 다시 만들기로 결정했습니다. 이것은 제가 유지하는 기원 프로젝트입니다.처음에는 HTML 및 부트 프로그램으로만 구성됩니다.이것이 바로 그의 모습이다.

HTML일 뿐이기 때문에, 내가 그것을 재건하는 것을 선택한 것은, 실제로는 계속 증가하는 과정에서 모든 구성 요소를 유지하기 어려웠기 때문이다.이 구성 요소들을 다시 사용하기 쉽기 때문에, 나는 React로 그것을 다시 만들고, 다른, 새로운 외관을 주기로 결정했다.
비록 첫 번째 디자인은 매우 좋지만, 나는 좀 더 평평하고, 더욱 간단하며, 더욱 쉽게 내비게이션을 할 수 있는 것을 시도하고 싶다.
React 및 Tailwind CSS를 사용하여 구축한 경우new website:

훨씬 간단한 사이트로 간단한 단추로 정보를 전달한다.
비록 디자인에 커다란 변화가 생겼지만, 이것은 내가 여기서 비교할 것이 아니다.내가 비교하고자 하는 것은 내가 Bootstrap과Tailwind CSS 방면의 경험, 그리고 어떤 것이 더 좋은지이다.

그들은 다르다

Tailwind CSS와 Bootstrap의 용도는 비슷할 수 있지만 서로 다릅니다.Tailwind CSS는 사용자의 시간을 절약하기 위해 사용하기 쉬운 유틸리티 클래스를 제공하는 데 더 신경을 씁니다.그들의 문서에서 말한 바와 같이 "sidebar-inner-wrapper와 같은 어리석은 이름을 더 이상 추가하지 마라. 단지 뭔가를 설계할 수 있기 위해서이다."이 유틸리티 클래스를 사용하여 다시 사용할 수 있는 구성 요소를 만드는 것도 권장합니다.
Bootstrap은 사용하기 쉬운 실용 프로그램 종류도 제공하지만 초기 버전부터 Bootstrap의 중점은 사용자에게 디자인된 유니버설 UI 요소를 제공함으로써 웹 사이트를 신속하게 만드는 데 도움을 주는 것입니다.붙이는 코드만 복사하면 사이트에서 내비게이션 표시줄을 볼 수 있다.

변화에 적응하다

Tailwind CSS를 처음 시도했을 때, 나는 Bootstrap이 나에게 제공하는 모든 기존 구성 요소를 사용하고 그에 상응하는 변경을 하는 데 익숙해졌기 때문에 약간 발버둥쳤다.Tailwind CSS를 사용하려면 구성 요소를 직접 만들어야 합니다. 처음에는 시간이 많이 걸리고 시간이 많이 걸린다고 생각했습니다.
그러나 내가 끊임없이 비결을 배우고 익히면서 점점 쉬워졌다.나의 사유는 바로'순풍 CSS'사유로 바뀌었고 구성 요소를 구축하는 것이 더욱 쉬워졌다.나는 더 이상 복사 붙여넣기 코드에 의존할 필요가 없다.유틸리티 클래스Tailwind CSS는 구성 요소의 스타일을 만들고 설정하는 방법을 알 수 있으며 CSS를 실제로 작성하지 않아도 이 작업을 수행할 수 있습니다.
Tailwind CSS에서 제공하는 클래스를 사용하는 것에 익숙해져서 다른 프로젝트에 종사할 때도 첫 번째 반응은 그것을 사용하는 것이다.

반응이 예민한 디자인과 어둠의 패턴으로 간단하게

Tailwind CSS의 많은 사용 가능한 클래스에서 대상 화면 크기에 따라 모든 규칙이나 클래스에 접두사를 추가하여 응답성 디자인에 쉽게 부합할 수 있습니다.
예를 들어, 모든 화면에서 요소의 폭을 50%로 설정하고 싶지만 작은 화면에서 100%로 설정하면 다음과 같이 쉽게 할 수 있습니다.

<span class="md:w-6/12 w-full">I'm responsive!</span>

더 이상 언론의 질의와 싸울 필요가 없다!Tailwind CSS에서 제공하는 거의 모든 유틸리티 클래스에 MD:, sm: 등 접두사를 추가할 수 있습니다.
Bootstrap에서, 이것은 일부 실용 프로그램 클래스에 제공되는 것이지만, 나는 그것이 원활하지 못해서, 결국 당신은 자신의 미디어 조회를 작성해야 한다고 생각한다.
다음은 어둠의 모드.어둠의 패턴은 현재 모든 사이트의 필수 기능이다.당신의 웹 사이트를 암흑 모드로 호환시키는 것은 아마도 번거로운 일일 것이다.이것도 네가 어떻게 사이트에서 구성 요소를 구축하느냐에 달려 있다.
Tailwind CSS는 웹 사이트 암흑 모드와 호환되는 사용하기 쉬운 솔루션을 제공합니다.요소 스타일을 설정할 때 접두사dark: 어두운 모드를 사용할 때만 적용되는 스타일을 추가할 수 있습니다.
예를 들면 다음과 같습니다.

<div class="bg-white dark:bg-gray-700"></div>

div에 추가된 클래스는 기본적으로 배경색이 흰색이어야 합니다.그러나 사이트에 어두운 모드가 켜져 있으면 색깔을 회색으로 바꿔야 한다.
이 문서를 작성할 때 Bootstrap은 웹 사이트에서 암흑 모드를 쉽게 실현할 수 있도록 도와주는 실용 프로그램 종류를 제공하지 않았기 때문에Tailwind CSS는 많은 시간을 절약할 수 있기 때문입니다.

현대적 감각

나는 Bootstrap을 사용한 지 이미 여러 해가 되었다. 최근에 나는 Bootstrap에서 구성 요소의 디자인이 좀 유행이 지났다는 것을 알아차리기 시작했다.색깔이든 다른 디자인 외관이든 디자인 모델에 적응하는 시간의 변화를 느끼지 못한다.
저는 Tailwind CSS에서 제공하는 색깔과 다른 색깔을 맞춤형으로 만들어서 얻는 것이 얼마나 쉬운지 정말 좋아합니다.Tailwind CSS는 기본적으로 사용할 수 있는 색상 세트를 제공하지만 구성을 통해 색상을 쉽게 변경할 수도 있습니다.
예를 들어 사이트를 만들 때, 나는 로즈가 기본적인 빨간색보다 낫다는 것을 발견했다.빨간색을 장미색으로 쉽게 바꿀 수 있으며 Tailwind CSS에서 제공하는 유틸리티 클래스를 그대로 사용할 수 있습니다.

//tailwind.config.js
red: colors.rose,

React와 함께 사용

안내와 React를 결합해서 사용할 수 있는 많은 방법이 있다.하지만 좀 귀찮을 수도 있어요.일반적으로 라이브러리는 다른 React 구성 요소를 만들어서 부트 구성 요소를 시뮬레이션합니다. 이 구성 요소를 가져와야 구성 요소에서 사용할 수 있습니다.
Tailwind CSS는 React와 함께 사용하기 쉽습니다.설정을 변경하기만 하면 구성 요소에서 쉽게 사용할 수 있습니다.
이러한 주요 차이점은 앞에서 말한 바와 같이 Bootstrap은 실용 프로그램 종류가 아닌 많은 UI 구성 요소를 제공한다는 데 있다.그래서 리액트에서 그것을 사용하는 이유는 이해할 수 있다.그러나 React에서 Tailwind CSS를 사용하는 것은 훨씬 좋습니다. 특히 재사용 가능한 구성 요소를 계속 만들고 있기 때문입니다.

결론

Bootstrap과 Tailwind CSS는 프로젝트에 더 적합한 고유의 용례를 가지고 있습니다.어떤 것을 사용해야 할지 확실하지 않다면, 프로젝트의 우선순위와 어떤 옵션이 당신에게 더 적합한지 평가해 보세요.