Tailwind CSS를 사용하지 않는 이유

개발 프로젝트들을 살펴보면 Tailwind CSS를 사용한다는 글들을 자주 보게 됩니다.

실제로 많은 스타트업과 프로젝트에서 Tailwind CSS를 사용합니다.
빠르게 화면을 만들 수 있고, 디자인 시스템을 어느 정도 강제할 수 있기 때문입니다.

그래서 저도 한 번 진지하게 고민했습니다.

“나도 Tailwind를 써야 할까?”

결론부터 말하면 사용하지 않기로 했습니다.

그 이유는 단순한 취향 문제가 아니라 UI 시스템을 만드는 관점에서 맞지 않기 때문입니다.

처음에는 좋아 보인다

Tailwind의 가장 큰 장점은 속도입니다.

예를 들어 버튼을 만든다고 하면 다음과 같은 형태로 작성할 수 있습니다.

[HTML 예시: Tailwind 버튼]

CSS 파일을 따로 만들 필요도 없습니다.

스타일을 바로 적용할 수 있고

빠르게 화면을 구성할 수 있습니다.

특히 프로토타입이나 초기 스타트업 서비스에서는 매우 매력적인 방식입니다.

그래서 많은 개발자들이 Tailwind를 선택합니다.

문제는 프로젝트가 커지기 시작할 때 발생합니다.

HTML이 점점 스타일 코드가 된다

Tailwind를 사용하면 HTML이 점점 다음과 같은 형태로 변합니다.

[HTML 예시: Tailwind 클래스가 많은 구조]

HTML이 점점 구조를 설명하는 문서가 아니라 스타일 명령어 모음이 됩니다.

원래 HTML의 역할은 구조(Structure)입니다.

그리고 CSS의 역할은 표현(Presentation)입니다.

하지만 Tailwind 방식에서는 이 두 가지가 한 곳에 섞입니다.

처음에는 편하지만 프로젝트가 커지면 읽기 어려운 HTML이 됩니다.

재사용이 어렵다

UI 시스템에서 가장 중요한 것은 재사용성입니다.

예를 들어 버튼이 50곳에서 사용된다고 생각해 보겠습니다.

Tailwind 방식에서는 다음과 같은 클래스 조합이 반복됩니다.

[HTML 예시: Tailwind 버튼 클래스]

만약 디자인이 바뀌면 어떻게 될까요?

bg-blue-500 → bg-primary

이 변경을 모든 HTML에서 수정해야 합니다.

반면 UI 시스템 방식에서는 이렇게 됩니다.

[CSS 예시: button]

HTML은 단순해집니다.

[HTML 예시: button 사용]

디자인이 바뀌면 CSS 한 곳만 수정하면 됩니다.

UI 시스템은 규칙이 핵심이다

제가 만드는 방식(SLUR CSS 방법론)은 단순히 CSS를 작성하는 방법이 아니라 UI를 구조적으로 설계하는 방법입니다. 핵심은 다음과 같습니다.

구조 (Structure)
요소 (Element)
수정자 (Modifier)
상태 (State)

이 규칙을 기반으로 UI를 설계하면

코드가 예측 가능해지고

구조가 명확해지고

유지보수가 쉬워집니다.

하지만 Tailwind는 이런 구조를 만들기보다는
스타일 조합을 빠르게 하는 도구에 가깝습니다.

즉 방향이 다릅니다.

CSS 프레임워크는 계속 바뀐다

웹 개발 역사에서 CSS 도구는 계속 바뀌어 왔습니다.

Bootstrap
Sass
Less
Styled Components
Emotion
Tailwind

기술은 계속 변합니다.

하지만 표준 CSS는 변하지 않습니다.

브라우저가 이해하는 언어는 결국 CSS입니다.

그래서 저는 표준 CSS 위에서 구조를 설계하는 방식을 선택했습니다.

도구보다 중요한 것은 설계 방식이기 때문입니다.

Tailwind가 나쁜 도구는 아니다

오해하지 않았으면 합니다.

Tailwind는 아주 훌륭한 도구입니다.

특히 이런 경우에 좋습니다.

빠른 프로토타입

작은 프로젝트

디자인 시스템이 없는 팀

프론트엔드 경험이 적은 팀

하지만 제가 하는 작업은 다릅니다.

저는 보통

UI 시스템을 만들거나

장기 유지보수가 필요한 서비스거나

여러 개발자가 함께 사용하는 구조를 만듭니다.

이 환경에서는 명확한 CSS 구조가 더 중요합니다.

그래서 SLUR는 Tailwind뿐만 아니라 CSS 프레임워크를 사용하지 않는다

결론은 단순하다.

SLUR에서 중요하게 생각하는 것은

빠른 스타일 작성이 아니라

지속 가능한 UI 구조이다.

그래서 SLUR에서는 CSS 프레임워크 대신
표준 CSS 기반의 구조화된 방법을 사용한다.

그 접근 방식이 바로 SLUR CSS 방법론이다.