Tailwind CSS : 디자이너가 좋아할 수밖에 없는 이유!

 

디자이너 분들, CSS 때문에 매번 골치 아프시죠? 원하는 디자인을 맞추려다 보면 시간도 오래 걸리고, CSS 코드도 길어지고… 그렇다고 CSS 다 외울 수도 없고요. 😅 Tailwind CSS는 그런 고민을 확 줄여줄 마법 같은 도구입니다! 🎨

---

Tailwind CSS가 뭐냐면?

Utility-First라는 개념이에요. 쉽게 말해 CSS 속성들이 미리 클래스 형태로 준비되어 있어서, HTML에서 필요한 속성들을 바로 클래스 하나로 해결할 수 있죠. 디자이너에게는 정말 직관적이고 빠르게 스타일링을 적용할 수 있는 최고의 도구!

---

디자이너가 알아두면 좋은 포인트!

1. 디자인 시스템에 딱 맞게 사용 가능
   Tailwind는 기본적으로 클래스 조합만으로 디자인을 완성할 수 있어요. 그래서 CSS 코드를 따로 짜지 않고도, 디자인 시스템을 구축하거나 스타일 가이드를 따르는 작업이 훨씬 쉬워지죠! 프로젝트에서 일관성 있는 디자인을 유지하는 데 Tailwind 만 한 게 없어요.
   
   
2. 반응형 디자인? 한 번에 끝!
   Tailwind는 반응형 디자인을 정말 쉽게 구현할 수 있어요. 모바일, 태블릿, 데스크탑 등 다양한 디바이스에 맞춰 디자인해야 할 때, Breakpoint를 몇 가지 클래스로 처리할 수 있어요. 따로 미디어 쿼리를 작성하지 않아도 되니 진짜 시간 절약이에요. ⏰
   
   
3. 클래스 이름 고민 끝!
   CSS 클래스 이름 짓는 거 은근 스트레스잖아요. Tailwind는 클래스 이름이 CSS 속성을 직관적으로 표현하기 때문에, 그냥 “이건 bg-blue-500로 배경색 파란색!” 이런 식으로 바로바로 설정 가능해요. 디자인 작업할 때 딱 필요한 만큼만 클래스 조합으로 스타일을 쉽게 적용할 수 있답니다!
   
   
4. 다크 모드도 간단히
   Tailwind는 다크 모드도 지원해요. dark:라는 프리픽스만 추가하면, 다크 모드 스타일을 추가하는 게 너무 쉬워집니다. 원래 다크 모드 디자인은 신경 쓸 게 많은데, Tailwind는 진짜 한 방에 해결해 줘요. 😎
   
   
5. 디자이너와 개발자 간 협업이 더 쉬워져요
   디자이너와 개발자 간의 협업도 Tailwind로 한층 부드러워집니다. 디자인 가이드에 맞춰 CSS를 일일이 설명하지 않아도, 디자이너가 원하는 스타일을 직관적인 클래스로 바로 적용할 수 있거든요. 시각적 수정이 필요할 때 개발자와의 소통이 훨씬 빠르고 간편해져요.
   
   
6. 유지 보수도 간단
   코드가 복잡하지 않아서 디자인 수정이나 유지 보수도 쉬워요. 새로운 스타일을 추가하거나 수정할 때, HTML에서 클래스를 그냥 바꾸기만 하면 끝이니까 코드 수정도 간단하고 효율적이에요!
   
   
   
   

Tailwind 적용 전후 비교!

적용 전

<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>

적용 후

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="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-slate-500">You have a new message!</p>
  </div>
</div>

보이시나요? 불필요한 코드가 확 줄고, 클래스 조합만으로 간단하게 스타일링이 끝났어요! 👏

---

단점도 있죠.

1. 코드 가독성은 좀 떨어질 수도 있어요
   클래스를 많이 사용하다 보면 가독성이 떨어질 수 있는데요, Headwind 같은 플러그인으로 깔끔하게 정리할 수 있어요!
   
   
2. CSS 파일 크기 문제? 걱정 마세요!
   JIT(Just-In-Time) 모드나 purge 옵션을 사용하면 필요한 클래스만 스타일시트에 포함할 수 있어서 파일 크기를 확 줄일 수 있답니다!
   
   
3. CSS 우선순위 문제
   Tailwind는 정의된 순서대로 스타일이 적용돼서 가끔 우선순위가 꼬일 수 있지만, twin.macro 같은 도구로 해결할 수 있어요!

---

Tailwind 설치는 이렇게!

설치부터 사용까지 4단계로 끝!

1. 설치

npm install -D tailwindcss
npx tailwindcss init

2. 설정 

@tailwind base;
@tailwind components;
@tailwind utilities;

3. 빌드

npx tailwindcss -i ./src/app.css -o ./dist/output.css --watch

 

4. 적용  이제 HTML에서 Tailwind 클래스만 붙이면 끝이에요!

<h1 class="text-3xl font-bold underline">Hello world!</h1>

---

결론: Tailwind로 스타일링이 더 쉬워집니다!

Tailwind CSS는 클래스 몇 개로 디자인을 쉽게 만들 수 있는 최강 도구에요. 복잡한 CSS 쓰느라 스트레스받지 말고, Tailwind로 빠르고 간편하게 스타일링하세요! 😎 Tailwind CSS를 한 번 써보면, 이 편리함에 빠져나올 수 없을 거예요!

자세한 내용은 공식 문서에서 확인해보세요!