TailwindCSS이란?
Tailwind란 컴포넌트 위주의 디자인 대신 HTML 문서에 저수준의 유틸리티 클래스를 정의하는 것으로 디자인을 구성할 수 있다.
- 부트스트랩같이 기존 디자인을 빠르게 가져와서 구성할 수는 없음
- 커스터마이징이 아주 편하고, 직관적임
실제 코드
Tailwind를 사용하지 않은 CSS
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<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: 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="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="ml-6 pt-1">
<h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
<p class="text-base text-gray-600 leading-normal">You have a new message!</p>
</div>
</div>
사전에 만들어진 디자인의 컴포넌트나 기능을 빠르게 가져와서 사용할 수 있도록 만들어진 프레임워크가 아니다. 그 대신, CSS의 각 속성들을 직관적이고 효과적으로 사용할 수 있도록 만들 수 있다.
장점
- 학습 난이도가 낮다.
- 정확하게는, CSS만 알고 있다면 누구나 빠르게 사용할 수 있다. 대부분의 클래스들이 단순히 각 스타일 속성의 축약형이나 다름없기 때문에, 클래스의 이름만 봐도 무슨 역할을 하는지 한눈에 알 수 있다. 또한 각 클래스마다 대부분 1~2개, 많아봐야 3~4개의 스타일 속성만을 가지고 있어 매우 단순하다.
- 재사용성이 높다.
- 대부분의 스타일 속성, 수치들이 클래스로 정의되어 있기 때문에, 중복되는 스타일 속성들을 일일히 적어줄 필요 없이 계속 클래스로 재사용이 가능합니다.
- 따라서 유지보수가 편리하다.Tailwind는 직관적인 클래스가 HTML 태그에 인라인으로 박혀 있기 때문에 개별 수정이 용이하다. 또 스타일을 변경할 때 다른 태그의 스타일에 대해서 전혀 걱정할 필요가 없다는 것도 큰 장점이다.
- 기존에는, CSS 디자인을 유지보수하려면 해당 HTML 태그의 스타일이 어떤 CSS 코드에서 왔는지를 먼저 찾아봐야 했다. 복잡한 프레임워크 테마의 경우에는 파일 여러개를 찾아보면서 수정하는 등 번거로웠다.
- 반응형 디자인도 어렵지 않다.
- Tailwind에서 반응형 디자인은 클래스명 앞에 md:, lg: 등의 미디어 쿼리를 대체하는 접두사를 붙임으로써 구성할 수 있다.
[참고]
'개발몰입과정 개념스터디 > 4차' 카테고리의 다른 글
CSR, SSR (React, Next.js) (0) | 2022.02.07 |
---|---|
PWA란? (0) | 2022.02.07 |
Styled-Component란? (0) | 2022.02.05 |
SCSS (CSS Modules)란? (0) | 2022.02.05 |
SEO와 SSG, 그리고 Gatsby.js (0) | 2022.02.05 |