기본 튜토리얼 - Tailwind CSS
이전 문서: 기본 튜토리얼 - Tailwind CSS 게시일: 2021-6-18 마지막 수정: 2024-9-12 원래 분류: ⌨ 개발 튜토리얼 태그: 개발 요약: 엔지니어링 방식의 CSS로 화면을 조합하면 UI 개발이 훨씬 편해지고, 화면 설계의 유연성도 크게 높아집니다.
머리말
Tailwind CSS는 훌륭한 CSS 클래스 라이브러리입니다. 라이브러리라기보다는 거대한 스타일 유틸리티 클래스 모음에 가깝습니다. Tailwind 문법을 익히고 익숙해지면 꽤 마음에 들 것입니다.
매달 npm 다운로드 수가 800만 회, jsDelivr 다운로드 수가 1000만 회에 이르고, Star 수도 40K를 넘었습니다. 이를 의존하는 Package와 GitHub Repo도 수천 개에 달하므로 인기를 쉽게 확인할 수 있습니다. 사용할 때는 Node 버전이 12.13.0보다 높은 것이 좋습니다.
Tailwind CSS의 입도
아래로 내려갈수록 입도가 커지고 제약이 강해지며 자유도는 낮아집니다. Tailwind CSS는 두 번째 레이어에 위치합니다.
<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>
-> <div class="rounded-lg p-4"> Click </div>
<div class="button"> Click </div>
<Button> Click </Button>이전 세대 CSS 프레임워크는 완성된 디자인 결과물을 제공하는 컴포넌트 수준의 방식이었습니다. 네 번째 레이어에 해당하며 입도가 크고 제약이 강해 자유도가 낮습니다. 예를 들어 <Input> 컴포넌트는 프레임워크가 모든 스타일을 이미 작성해 두었기 때문에 클래스명만 넣으면 input이 꾸며집니다. 물론 Bootstrap은 Sass 버전을 제공해 변수를 수정할 수 있지만, 그래도 커스터마이징 공간은 크지 않습니다.
Tailwind가 제공하는 것은 디자인 규격입니다. 개념 수준의 재료에 가깝습니다. 예를 들어 input 컴포넌트를 만든다면 먼저 input을 분해해야 합니다. 테두리, 글꼴, 그림자, 둥근 모서리 같은 요소를 프레임워크에서 골라 조합하는 방식입니다.
이 방식은 디자이너의 창작 상상력을 크게 자극하고, 디자이너가 직접 프로그래밍할 가능성도 열어 줍니다.
장점
방대한 스타일 클래스 선언
Tailwind는 많은 스타일 클래스 선언을 제공합니다. 페이지 스타일을 작성할 때 거의 한 줄의 style도 쓰지 않고 대부분의 상황을 구현할 수 있습니다. 예를 들어 div를 flex 레이아웃으로 세로 가운데 정렬하려면 보통 다음 CSS를 작성해야 합니다.
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}Tailwind CSS를 사용하면 요소의 class에 다음처럼 선언하면 됩니다.
<div class="flex justify-center items-center">I am a div</div>편리한 반응형 처리
다양한 해상도 화면에서 다른 스타일을 적용하려면 스타일 앞에 대응하는 breakpoint 접두사를 붙이면 됩니다.
<!-- default width 16; width 32 on medium screens; width 48 on larger screens, and so on -->
<img class="w-16 md:w-32 lg:w-48" src="...">작고 가벼움
프로덕션 버전의 라이브러리 크기는 8.7KB에 불과합니다.
코드 단순화
완전한 예를 들어 보겠습니다. 아래와 같은 효과를 구현해야 한다고 가정합니다.
일반적인 방식으로는 다음처럼 작성해야 할 수 있습니다.
<div class="chat-notification">
<div class="[chat-notification-logo-wrapper](https://www.zhihu.com/search?q=chat-notification-logo-wrapper&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A1693039814%7D)">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
[margin-left](https://www.zhihu.com/search?q=margin-left&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A1693039814%7D): 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>Tailwind CSS를 사용하면 다음처럼만 작성하면 됩니다.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>Visual Studio Code 플러그인 지원
플러그인을 설치하면 빠른 개발 경험을 얻을 수 있습니다.
공식 생태계
컴포넌트 참고
Tailwind CSS Components. Examples and templates
Tailwind CSS examples from components by the community. Tailwind chart, grids, inputs, forms, templates and much more
Tailwind CSS Components - Tailwind UI
Beautiful UI components and templates by the creators of Tailwind CSS.
내장 색상 참고
Customizing Colors - Tailwind CSS 문서
Customizing the default color palette for your project.
스타일 수정 예시
이 방법은 개발 경험이 있는 사용자에게 적합합니다.
example 테마를 예로 들기
example 테마의 배경색을 어떻게 수정할까요? /themes/example/index.js에서 theme-example 줄을 찾습니다.
<div id='theme-example' className={`${siteConfig('FONT_STYLE')} dark:text-gray-300 bg-white dark:bg-black scroll-smooth`} >
여기서 bg-white는 기본 테마 배경색이 흰색임을 뜻하고, dark:bg-black은 다크 모드 배경색이 검은색임을 뜻합니다.
원하는 색상 값으로 자유롭게 조정할 수 있습니다. Tailwind CSS의 사용자 지정 색상 튜토리얼에 따라 다음처럼 설정할 수 있습니다. bg-[#dca846] dark:bg-[#eeeeee]
<div id='theme-example' className={`${siteConfig('FONT_STYLE')} dark:text-gray-300 bg-[#dca846] dark:bg-[#eeeeee] scroll-smooth`} >다른 테마의 배경색을 수정할 때도 같은 단계를 따르면 됩니다.
테마 파일
/themes/xx/index.js를 찾습니다.전체 배경색을 담당하는
id='theme-xx' className='bg-day dark:bg-night'를 찾아 수정하고 저장합니다.
정리
앞으로의 CSS 프레임워크 흐름은 분명 더 세분화되고 더 엔지니어링 중심으로 갈 것입니다.
Tailwind의 미적 결과가 항상 최고라고 할 수는 없습니다. 하지만 이런 작업 방식은 여러 회사에서 힘을 발휘할 것입니다. 특히 통합 디자인 팀이 있고 UI를 일관되게 맞춰야 하는 회사에 적합합니다. 이런 회사에서는 디자인 규격을 잘 작성해 두면, 이후 작업은 조합에 가까워집니다. 디자이너가 직접 조합해 결과를 만들 수 있다면 개발자의 시간도 절약됩니다.
Tailwind CSS 관련 리소스
공식 문서
Tailwind CSS는 유틸리티 우선 CSS 프레임워크이며 Adam Wathan이 만들었습니다. 이 사이트는 Tailwind CSS 공식 문서를 번역해 개발자가 프레임워크를 정확히 이해하고 사용할 수 있도록 돕습니다.
여담 - Tailwind CSS: 부업 프로젝트에서 200만 달러 비즈니스가 되기까지
저는 Tailwind CSS를 만든 Adam Wathan입니다.
2020년 7월, Tailwind의 총 설치 수가 1000만 회를 넘었습니다. 저에게도 매우 놀라운 일이었습니다.
우리는 Tailwind UI에서 200만 달러의 수익을 얻었습니다. Tailwind UI는 첫 번째 상용 Tailwind CSS 제품이며, 첫 Tailwind CSS 버전이 공개된 지 2년 뒤에 나왔습니다.
This was originally posted as a thread on Twitter, but I thought I'd republish it here to give it a proper home. So about a month or so ago, Tailwind cracked 10 million total installs, which given its humble beginnings, completely blows my mind.
- 한국어