다음 항목에서 Tailwind를 사용하는 이유

문제

새로운 사이트나 웹 응용 프로그램을 구축할 때 프로젝트에서 낡은 CSS 프레임워크를 사용하기 쉽고 내용에 중점을 두기 쉽다.네, 아주 좋아 보이지만 같은 프레임워크를 사용하는 9900만 개의 사이트와 똑같습니다.따라서 "튀어나오기"를 위해 스타일 대체를 추가한 다음 추가한 다음 추가합니다.현재 사이트는 독특해 보이지만 HTML보다 CSS를 많이 작성합니다.
오해하지 마세요. 모든 CSS 프레임워크는 장점과 장점을 가지고 있습니다.초보 사용자에게는 미리 설계된 구성 요소를 위한 프레임워크를 사용하면 스타일에서 벗어나기 쉽다.그러나 본고에 포함된 것은 다음 단계다.
복잡한 스타일, 서로 충돌, 구성 요소가 전역 스타일시트를 덮어쓰고, 한 페이지에 3개의 귤이 있습니다. - 사용자 정의 UI로 업그레이드하면 일이 곧 엉망이 됩니다.
이것이 바로 Tailwind CSS와 같은 유틸리티 드라이버 프레임워크가 도움을 줄 수 있는 곳이다.
본고는 세 가지 주요 문제에 대답할 것이다.

공용사업 구동은 무엇을 의미합니까?

전형적인 프레임의 구성 요소 종류는 얼마나 깔끔합니까?

CSS 프레임워크 사용자 정의는 얼마나 쉽습니까?

공용사업 구동?공포의

우선, 아니, 이것은 결코 무섭지 않다.설명 좀 할게요.
대부분의 CSS 프레임워크와 템플릿은 많은 구성 요소를 제공합니다.모든 구성 요소는 특정한 방식으로 설계되어 있으며, 당신은 반드시 이런 방식으로 이 구성 요소를 사용해야 합니다.만약 당신이 현재 상황을 바꾸기로 결정한다면, 구성 요소를 한데 연결하는 약 100가지 스타일은 붕괴될 것이다.
바람이 잘 불 때는 부품이 없다.Tailwind의 저급 유틸리티 클래스를 사용하여 페이지를 현저하게 설계할 수 있으며, 임의의 클래스와 div 요소를 붙여넣은 무의미한 차원 구조의 구성 요소를 복사할 필요가 없습니다.
다음은 Bootstrap을 사용하는 카드의 예입니다. Bootstrap은 매우 유행하는 CSS 프레임워크입니다.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, eos!</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

이것은 내가 순풍으로 처음부터 다시 만든 구성 요소이다.

<div class="border text-gray-900 rounded p-2">
  <div class="p-2">
    <div class="font-medium text-xl mb-2">Card title</div>
    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, eos!</p>
    <a href="#" class="rounded p-2 text-white bg-blue-600">Go somewhere</a>
  </div>
</div>

둘을 비교해 보면 Bootstrap보다 HTML에서 더 많은 Tailwind 유틸리티 클래스를 작성해야 한다는 것을 알 수 있다.글씨체의 크기, 간격, 색깔에 대해 이렇게 많이 쓰는 것은 시간을 낭비하는 것이고, 이 모든 것은 현식적인 것이다."선두적인 틀은 나로 하여금 더 적은 대가를 치르고 더 많은 것을 얻게 한다!"나는 네가 말하는 것을 들었다.
그래, 너는 잘못이 없어.유틸리티 드라이브는 모든 스타일을 명확하게 작성해야 적용할 수 있음을 의미합니다.또한 구성 요소 구동 프레임워크는 미리 정해진 클래스 몇 개만 작성하고 전체 구성 요소를 보답할 수 있습니다.
하지만 이것도 이야기의 절반에 불과하다.우리는 또 다른 두 가지 문제를 해결해야 한다.

추가 수하물

전형적인 구조에서 card, card-body, card-text 같은 종류는 무대 뒤에서 무엇을 합니까?
위의 두 예시 항목의 배후 상황을 봅시다.Bootstrap과 Tailwind here 및 here 에서 전체 CSS 원본 파일을 가져와 PurgeCSS 를 통해 실행하여 사용하지 않은 CSS를 제거했습니다.이것은 우리가 작성한 HTML 설정 스타일에 사용할 CSS만 남게 합니다.
먼저 Bootstrap의 모든 230줄을 살펴보겠습니다.

/*!
 * Bootstrap v4.5.2 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

 h5 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

 h5, .h5 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h5, .h5 {
  font-size: 1.25rem;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

 .btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

 .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-text:last-child {
  margin-bottom: 0;
}

@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  p {
    orphans: 3;
    widows: 3;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
}

우리는 보기에 매우 간단해 보이는 카드를 포맷하는 데 얼마나 많은 CSS가 사용되는지 볼 수 있다.HTML에서 작성한 클래스와 일치하지 않는 클래스가 상당히 많다는 것을 알 수 있습니다.인코딩은 우리에게 매우 쉽지만, 브라우저에서는 비용이 비싸다.
다음은 순풍을 봅시다.

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

a {
  background-color: transparent
}

 p {
  margin: 0
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5
}

*, ::after, ::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e2e8f0
}

a {
  color: inherit;
  text-decoration: inherit
}

.bg-blue-600 {
  --bg-opacity: 1;
  background-color: #3182ce;
  background-color: rgba(49, 130, 206, var(--bg-opacity))
}

.rounded {
  border-radius: .25rem
}

.border {
  border-width: 1px
}

.font-medium {
  font-weight: 500
}

.text-xl {
  font-size: 1.25rem
}

.mb-2 {
  margin-bottom: .5rem
}

.mb-4 {
  margin-bottom: 1rem
}

.p-2 {
  padding: .5rem
}

.text-white {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity))
}

81줄밖에 없어요.깨끗하다CSS에서 유일하게 존재하는 클래스는 우리가 코드에서 언급한 클래스이지 다른 클래스가 아니라는 것을 알 수 있습니다.이것이 바로 Tailwind의 효용 구동 프레임워크의 매력이다.HTML에서 본 것은 CSS에서 얻은 것이다.
지워진 두 CSS 파일의 크기를 보면 다음과 같은 차이가 있습니다.
프레임
CSS 행
지워진 CSS
독자적으로 창립하다
230
5kb
순풍
81
1kb

맞춤형 설계

가장 좋은 틀은 방해가 되지 않는 틀로 당신이 원하는 것을 구축하는 것이다.순풍이 이곳에서도 우세하다.우리가 이전에 만든 카드를 사용하는 예를 봅시다.테두리, 원각, 옅은 빨간색 배경, 멈출 때 어두워지는 그림자가 없는 카드를 만들고 싶습니다.
Bootstrap에서는 유틸리티를 사용하여 테두리를 삭제하고 기본 섀도우를 추가할 수 있지만, 배경색, 추가 필렛, 스톱 시 어두운 섀도우를 위한 사용자 정의 CSS를 작성해야 합니다.우리는 이렇게 할 수 있다.

<style>
  .card {
    background-color: #f5b3af;
    border-radius: 0.5rem;
    transition: 0.5s;
  }
  .card:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25) !important;
  }
</style>
<div class="card border-0 shadow">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, eos!</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

보시다시피 CSS 프레임워크를 사용했지만 사용자 정의 CSS를 추가하기 시작했습니다.완전한 웹 페이지나 응용 프로그램의 디자인을 완성할 때, 이것은 매우 혼란스럽고 혼란스러워질 수 있다.
순풍을 봅시다.우리는 제공된 다양한 실용 프로그램을 사용하여 모든 맞춤형 제작을 할 수 있다.우리는 더 많은 색깔을 순풍에 내장할 수 있기 때문에 정확한 색조를 선택하는 것이 매우 쉽다.Tailwind에는 hover와 같은 변형에 대한 지원도 포함됩니다.이것은 우리가 hover: 를 작성한 후에 모든 실용 프로그램 종류와 연결할 수 있다는 것을 의미한다. 예를 들어 멈출 때만 이 스타일을 활성화할 수 있다.

<div class="rounded-lg shadow-xl hover:shadow-2xl p-2 bg-red-200">
  <div class="p-2">
    <div class="font-medium text-xl mb-2">Card title</div>
    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, eos!</p>
    <a href="#" class="rounded p-2 text-white bg-blue-600">Go somewhere</a>
  </div>
</div>

봐봐. - CSS 없어!
사용자 정의 CSS를 작성할 필요 없이 완전한 응용 프로그램을 만들 수 있습니다.

독특하고 다기능적이며 유지 보수가 가능합니다.

Tailwind에는 CSS나 사고 클래스를 구성하는 데 시간이 걸리지 않고 작업을 완성할 수 있는 다양한 설정 옵션, 사전 설정, 수백 개의 유틸리티가 있습니다.
Tailwind에 대한 더 많은 정보를 얻으려면 그들의 멋진 website 위로 올라가서 끝없는 문서와 상세한 영상 강좌를 제공해 주십시오.소리 지르는 거 잊지 마!
이와 유사한 더 많은 개발 힌트에 대해서는 과학과 기술을 방문하고 subscribe to my newsletter 이해하십시오.