🎨 Tailwind vs SCSS(Sass)

🌟 Tailwind CSS

Tailwind CSS는 utility-first 스타일링 방식의 프레임워크입니다.
많은 CSS 클래스 이름을 조합해서 스타일을 적용합니다.

❗ 특징

• Utility-First Framework:
  클래스 이름 자체가 스타일을 의미합니다.
  예) bg-blue-500, text-center, p-4

• 설정 및 커스터마이징
  tailwind.config.js 파일을 통해 색상, 여백, 폰트 등의 테마를 자유롭게 설정 가능

• 재사용 가능한 클래스
  특정 스타일 조합을 클래스 이름으로 재사용 가능

• 디자인 일관성
  미리 정의된 클래스를 활용해 프로젝트 전반에 걸쳐 디자인을 통일시킬 수 있음

• JSX와의 호환성
  React 등 컴포넌트 기반 프레임워크에서 JSX와 자연스럽게 통합됨

🧵 SCSS (Sass)

SCSS는 Sass의 문법 중 하나로, CSS를 확장해주는 전처리기입니다.
보다 효율적인 스타일링과 구조적인 CSS 작성을 지원합니다.

❗ 특징

• CSS 전처리기
  CSS 문법을 기반으로 하며, 컴파일 과정을 통해 .css 파일로 변환됨

• 가독성 향상
  중첩 구조를 통해 코드가 계층적으로 정리되어 읽기 쉬움

• 변수 사용
  색상, 크기 등을 변수로 선언해 반복 사용 가능
  예) $main-color: #3490dc;

• Mixin과 함수
  반복되는 스타일을 함수처럼 작성해 재사용 가능
  → @mixin, @function

• 기존 CSS와의 호환성
  기존 CSS를 그대로 사용할 수 있어 점진적 도입 가능

⚖️ 주요 차이점 요약

항목	Tailwind CSS	SCSS (Sass)
스타일 방식	클래스 조합 (inline)	외부 스타일시트
접근 방식	Utility-first	전통적인 CSS 확장 방식
설정/사용법	tailwind.config.js로 설정	컴파일 과정 필요 (Sass → CSS)
재사용성	클래스 조합으로 반복 사용	변수, 믹스인, 함수 등으로 재사용
유연성	빠른 적용, 일관된 스타일	복잡하고 커스터마이징이 쉬움
React 호환성	매우 뛰어남 (JSX에 바로 사용)	별도 클래스명 관리 필요

✅ 정리

• Tailwind CSS 추천

  • 빠르게 UI를 구성해야 할 때
  • 일관된 디자인 시스템을 구성할 때
  • React 같은 컴포넌트 기반 프레임워크를 쓸 때

• SCSS 추천

  • 기존 CSS 경험이 많고, 전통적인 방식이 익숙할 때
  • 커스터마이징이 많은 디자인을 구현할 때
  • 전역 스타일보다 구조화된 스타일 분리가 필요한 경우