75. What is Tailwind?
npm create vue@latest
Tailwind
Tailwind는 새로운 프레임워크입니다.
2022년에 Tailwind 사용자 기반이 급격히 증가했습니다.
그럴만한 좋은 이유가 있습니다.
Tailwind는 사이트 개발을 훨씬 쉽고 빠르게 만들어줍니다.
그렇다면 Tailwind란 무엇일까요?
Tailwind는 CSS 프레임워크입니다.
Bootstrap이나 Bulma와 같은 다른 프레임워크와 유사합니다.
하지만 Tailwind는 CSS를 다루는 방식 때문에 다른 프레임워크들과 차별화됩니다.
Bootstrap이 CSS에 접근하는 방식에 대해 이야기해봅시다.
Bootstrap은 UI 요소를 만드는 클래스를 제공합니다.
예를 들어, 카드 컴포넌트를 사용하고 싶다고 가정해봅시다.
이 코드 스니펫은 Bootstrap을 사용하여 카드 컴포넌트를 만드는 방법을 보여줍니다.
몇 개의 div 태그를 만들고 클래스를 적용하기만 하면 됩니다.
꽤 간단하죠?
그러나 Bootstrap의 가장 큰 비판은 많은 사이트들이 비슷해 보인다는 것입니다.
이는 Bootstrap이 미리 정의된 일련의 컴포넌트를 제공하기 때문입니다.
이 컴포넌트들은 상자에서 꺼내자마자 바로 사용할 수 있습니다.
이들을 커스터마이징하는 것은 완전히 선택사항입니다.
예를 들어, 카드의 제목 색상을 빨강색으로 변경하고 싶다고 가정해봅시다.
카드 제목 요소를 선택하여 변경을 적용할 수 있습니다.
이 방법은 작동하지만, 다른 카드 요소의 제목에도 영향을 미칩니다.
이를 해결하기 위한 한 가지 방법은 ID와 같은 더 나은 지정자를 사용하는 것입니다.
이 방법은 작동하지만, 확장성이 떨어집니다.
이 접근법은 문서와 스타일시트 사이를 계속 전환해야 한다는 단점이 있습니다.
또한, 동일한 CSS를 반복해서 작성해야 할 수도 있습니다.
UI 요소가 늘어날수록 작성해야 할 CSS도 늘어납니다.
또 다른 도전 과제는 모든 클래스가 무엇을 하는지 기억해야 한다는 것입니다.
Bootstrap의 클래스는 UI 요소를 설명하지만, 요소에 적용되는 속성을 설명하지는 않습니다.
Tailwind는 탬플릿을 작성하는 다른 방식에 중점을 두어 이 문제를 해결합니다.
Tailwind는 UI 요소에 집중하지 않습니다.
문서를 살펴보면, 많은 UI 요소를 발견하지 못할 것입니다.
대신 Tailwind는 유틸리티 클래스에 집중합니다.
그게 무슨 뜻일까요?
Tailwind는 수백 개의 클래스를 정의할 것입니다.
각 클래스는 하나의 속성만을 수정합니다.
예를 들어 m-4라는 클래스가 있습니다.m-4클래스는 요소의 마진을 1rem으로 설정합니다.
이 클래스 아래에는 다른 속성이 없습니다.
반면에 Bootstrap 클래스는 요소의 여러 속성을 수정할 수 있습니다.
이러한 이유로 Tailwind는 더 큰 학습 곡선을 가지고 있습니다.
이는 CSS에 대한 탄탄한 지식을 요구하는 프레임워크입니다.
CSS에 대해 잘 모르면 멀리 가지 못할 것입니다.
다행히도 CSS는 간단한 언어입니다.
처음에는 Tailwind가 읽기 어렵게 보일 수 있지만, 그렇지 않습니다.
각 클래스가 무엇을 하는지 이해하면, 그 클래스가 요소에 어떤 속성을 적용하는지 즉시 알 수 있습니다.
이는 스타일 시트로 전환하여 클래스를 이해하는 데 드는 시간을 절약해줍니다.
이 강의의 리소스 섹션에서는 공식 Tailwind 사이트로의 링크를 제공합니다.
홈페이지에서는 이 프레임워크로 만들 수 있는 타입의 UI 요소들을 볼 수 있습니다.
오른쪽에는 Tailwind로 작성된 HTML이 어떻게 보일지가 나와 있습니다.
Bootstrap과 달리, 여러 클래스가 요소에 적용되어 있습니다.
각 클래스는 하나의 속성을 변경합니다.
이 실시간 예제에서는 각 클래스가 추가됨에 따라 요소에 어떻게 영향을 미치는지 볼 수 있습니다.
이제 질문은 어떤 클래스를 사용해야 할지 어떻게 알 수 있느냐는 것입니다.
Tailwind는 최고의 문서화를 가지고 있습니다.
각 클래스는 잘 문서화되어 있으며, 상단에서는 어떤 클래스든 검색할 수 있습니다.
앞서 살펴본 m-4 클래스를 검색해 봅시다.
문서에 따르면,
이 클래스는 요소의 마진을 변경합니다.
그리고 얼마나 변경되는지도 알려줍니다.
CSS를 볼 필요가 없습니다.
문서는 클래스가 가질 속성과 값을 항상 알려줍니다.
단일 클래스에만 제한되지 않습니다.
요소의 마진을 변경하기 위한 여러 클래스가 있습니다.
우리는 한쪽 또는 축에 마진을 추가할 수 있습니다.
지금까지 본 바로는 Tailwind가 훌륭해 보입니다.
그렇다면 문제는 무엇일까요?
Tailwind의 단점
Tailwind는 대부분의 라이브러리보다 훨씬 큽니다.
압축되지 않은 상태에서는 300킬로바이트가 넘습니다.
다행히 Tailwind는 Purge CSS라는 라이브러리와 손을 잡고 있습니다.
이 강의의 리소스 섹션에서는 Purge CSS 라이브러리로의 링크를 제공합니다.Purge CSS는 HTML에서 사용되는 클래스를 스캔하고, 스타일시트에서 사용되지 않는 CSS를 제거합니다.Purge CSS는 Tailwind와 함께 자주 사용됩니다.
평균적으로 대부분의 Tailwind 사이트는 10킬로바이트 미만을 사용합니다.
이 과정은 Tailwind 모듈을 설치함으로써 자동으로 이루어집니다.
Tailwind는 그 인기가 높아지고 있는 이유가 있습니다.
우리가 사용하는 클래스에 혼란스러워한다면 언제든지 문서를 참조할 수 있습니다.
문서는 즉시 해당 요소에 적용되는 속성을 알려줄 것입니다.
이 강의에서는 우리의 음악 앱을 위해 Tailwind를 사용할 예정입니다.
다음 강의에서는 Tailwind 설치 과정을 진행할 것입니다.