Tailwind CSS는 CSS-in-JS인가, CSS-in-CSS인가?
Tailwind CSS는 CSS-in-JS나 CSS-in-CSS 중 어느 한 쪽에 정확히 속한다고 보기는 어렵습니다. 그러나 그 특성과 사용 방식으로 볼 때, CSS-in-CSS에 더 가까운 방식이라고 할 수 있습니다.
Tailwind CSS란 무엇인가요?
Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 미리 정의된 클래스들을 활용하여 빠르게 스타일링할 수 있도록 도와줍니다. 개발자는 클래스 이름을 HTML 요소에 직접 적용하여 원하는 스타일을 구성합니다.
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
클릭하세요
</button>위 코드에서 여러 개의 유틸리티 클래스를 조합하여 버튼의 스타일을 지정하고 있습니다.
CSS-in-CSS와의 관계
- CSS-in-CSS는 별도의 .css 파일에 스타일을 작성하고, HTML에서 해당 클래스를 참조하는 전통적인 방식입니다.
- Tailwind CSS도 스타일을 미리 정의된 클래스 형태로 사용하므로, CSS-in-CSS 방식과 유사합니다.
- 그러나 Tailwind CSS는 개발자가 직접 CSS 코드를 작성하지 않고, 프레임워크에서 제공하는 유틸리티 클래스를 조합하여 스타일링합니다.
CSS-in-JS와의 관계
- CSS-in-JS는 JavaScript 코드 내에서 스타일을 정의하고, 컴포넌트에 직접 적용하는 방식입니다.
- Tailwind CSS는 JavaScript 파일 내에서 스타일을 정의하지 않습니다.
- 하지만, React나 Vue와 같은 프레임워크에서 Tailwind CSS를 사용할 때 JSX나 템플릿 안에 클래스명을 작성하므로, 코드 내에 스타일 관련 내용이 포함된다는 점에서 일부 유사성이 있습니다.
- 그러나 실제 스타일 정의는 CSS 파일에 존재하며, JavaScript 코드에서 스타일을 동적으로 생성하지 않습니다.
Tailwind CSS의 특징
- 유틸리티 클래스 기반: 미리 정의된 수많은 유틸리티 클래스를 조합하여 원하는 스타일을 구현합니다.
- 커스터마이징 가능: 설정 파일(tailwind.config.js)을 통해 색상, 폰트, 간격 등 디자인 시스템을 정의할 수 있습니다.
- 퍼지(purge) 기능: 사용되지 않는 CSS를 제거하여 최종 CSS 파일 크기를 최소화합니다.
- 프레임워크 독립적: HTML, React, Vue 등 다양한 환경에서 사용할 수 있습니다.
결론
- Tailwind CSS는 CSS-in-CSS 방식에 속하며, 전통적인 CSS 파일을 사용하는 것과 유사하지만, 유틸리티 클래스를 통해 스타일링을 더욱 효율적으로 할 수 있도록 도와줍니다.
- CSS-in-JS 방식은 아니며, JavaScript 코드 내에서 스타일을 정의하거나 관리하지 않습니다.
- 따라서 Tailwind CSS는 CSS-in-CSS 방식의 현대적인 변형으로 볼 수 있습니다.