한국인이 tailwindcss를 쓰면 안되는 이유?

원래 제목은 "한국인이 tailwindcss를 선호하지 않는 이유"라고 적으려 했는데 재미없어서 제목 바꾼 것이다.
그래서 어쩌라고.

본론 간다.

예쁘지 않아서.

이건 tailwindcss 기반이 되는 대부분의 유틸리티 CSS 개념의 단점이다.

<div class="py-8 px-8 max-w-sm my-12 mx-auto bg-green-400 text-slate-700 rounded-xl shadow-lg space-y-2 sm:py-4 sm:px-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 2xl:max-w-2xl 2xl:py-16 2xl:px-16 2xl:space-y-2 2xl:space-x-2">
  <span>난 초록초록한 카드라고 해.</span>
</div>

말 안해도 뭔 소린지 눈으로만 봐도 알 것이다.
물론 대응 방법은 있다. React 같은 주요 프론트엔드 라이브러리의 경우 class 및 className 속성을 여러 문자열로 나누는 방법이 있다. 그리고 vue나 svelte 같은 놈들은 스타일도 적용할 수 있어서 특정 요소를 꼬집어 @apply 단축속성을 사용할 수 있다.

그래도 안예쁠 것이다. 특히 편집기에서 텍스트 열 넓이를 강제하는 정책의 경우는 쉣일 것이다.

픽셀 단위가 아니라서.

tailwindcss 는 기준 폰트 크기에 기반하는 상대 단위인 rem 을 사용한다. 그리고 기본적으로 tailwindcss의 기준 폰트 크기는 14px이다. 그래서 1.5rem 이면 폰트 크기의 150%, 2.25rem 이면 폰트 크기의 250%...

하지만 한국의 웹 사이트 디자인 시스템은 디자이너가 결정한다. 개발자는 그럴 권한이 없다. 디자이너가 갑이고, 개발자는 을도 아니다. 백오피스 같은 디자인 요소 비율이 적은 사이트를 제외하면, 대부분 사이트라면 그럴 것이다.

당연히 디자인이 갑이니, 크기 단위는 당연히 px 이다. 그러니, 컨테이너 크기 정할 때도, 박스 크기 정할 때도, 이미지 크기도 뭐고 할 것없이 크기를 잡을 땐 디자이너가 가이드한 대로 px 단위로 해야 한다. 그래야지 브라우저 사용자 설정을 통해 폰트 크기를 키워도 일관된(?) 레이아웃 경험을 제공할 수 있으니까.

물론 커스터마이징 하여 적용할 수 있거나, 아예 오버라이드 또한 가능하다. 하지만 그럴 수고할 바엔 그냥 안 쓰는게 나을 것이다.

마침 대안이 하나 있기는 하다. 귀여운 CSS래나 뭐래나. 얘는 기본 픽셀 단위이다.

React: CSS in JS가 더욱 보기좋고 편리하다

예를 들어, Styled Components의 경우, 박스 하나 만들 때 대충 이렇게 만든다.

const Box = styled.div`
  padding: 14px 16px;
  background-color: green;
  color: white;
  border-radius: 8px;
`

뭐? emotion 예제도 달라고? 운영 종료된 라이브러리 예시를 내가 왜 줘야 하지? 꺼져.

공통으로 이렇게 스타일 적용된 박스 컴포넌트를 만들어 재활용하면 된다. 디자이너가 보기 좋게 되어 있다.
디자이너에게 이걸 보여줘봐라.

<div class="py-8 px-8 max-w-sm my-12 mx-auto bg-green-400 text-slate-700 rounded-xl shadow-lg space-y-2 sm:py-4 sm:px-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 2xl:max-w-2xl 2xl:py-16 2xl:px-16 2xl:space-y-2 2xl:space-x-2">
  <span>난 초록초록한 카드라고 해.</span>
</div>

널 디지타이저 펜으로 찌르려 할 것이다.

그리고 CSS in JS 기술은 많은 업체들이 쓰고 있다. Styled Components의 경우,

쟁쟁한 기업들이 검증했는데 안쓴다면 이상하지.

예전엔 Babel을 써야 원활한 개발이 가능했는데 요즘은 SWC도 지원하기 시작해서 개발생산성도 잡은 상태다. 그렇다고.
한국은 대부분 SPA 방식을 쓸 테니 있으면 좋고 없어도 문제는 없지만, Next.js 같은 SSR 환경에는 없으면 좆되는 것만 알면 된다.

대체 tailwindcss가 뭐가 좋다고 쓰는거지?

내가 tailwindcss에 긍정적으로 적용한 이유를 대충 분석해주도록 하겠다.
그렇다고 당장 바꿀 필요는 없다. 네가 갑이 아니라면 말이지. 충분히 협의 후 쓰도록 하자.
한번 정착하면 바꾸는 건 건물 철거 후 다시 짓는 걸 해야 하는 수준이나 마찬가지기 때문이다.

반응형이 쉽게 해결

tailwindcss 에 긍정 평가를 하는 가장 큰 이유다. 유틸리티 CSS 개념의 장점이기도 하다. 물론 반응형 기준이 정해져 있긴 하지만, 필요하면 변경하는 것도 어렵지 않다. 공식 문서 참고.

그냥 접두어 sm:, md:, lg: 걸고 뒤에 원하는 스타일 넣으면 땡이다. 예를 들어 sm:text-lg md:text-xl lg:text-2xl 걸면 모바일엔 큰 글씨, 태블릿엔 더 큰 글씨, 그리고 데스크탑엔 더 큰 글씨를 적용할 수 있다.

그럼 Styled Components 쓴다면?

const Box = styled.div`
  @media screen and (max-width: 768px) {
    /* 여기에 모바일 스타일 입력 */
  }
`

그렇다. media query 그대로 써야 하고, 이게 동적으로 들어가면 전략 똑바로 세우거나, 아니면 무식하게 미디어 쿼리 쓰거나 해야 한다.
하지만 tailwindcss 는 준비할 필요 없이, 혹은 간단하게 준비하고 바로 적용 가능하다는 장점이 있다.

이외에도 다크 모드, 컨테이너 쿼리 등 복잡하게 보조 기능까지 tailwindcss 는 클래스 접두어로 쳐넣어 바로 쓸 수 있다.

정해진 크기, 수치는 거들 뿐

내가 아까 말했듯 기본 브라우저 폰트 크기 14px를 1rem 으로 잡고 rem 단위로 1/4 로 쪼개서 크기를 정했다고 했다.
그러면 그 수치를 숫자로만 해결하면 된다. px-8 이면 padding-left: 2rem; padding-right: 2rem 문제가 해결된다.

flex 및 grid 또한 사용하기 쉽다. flex items-center justify-center 이 3개 클래스로 바로 완전 중앙 가운데 정렬이 해결되고, grid grid-cols-3 클래스로 자식 3개씩 나열하는 방법이 바로 해결된다.
이것 또한 긍정적 평가로 자리잡은 이유다.

동적 크기를 원해? CSS 변수가 있잖아!

CSS 변수 기능은 표준이다. tailwindcss 도 CSS 변수 기능을 최대한 활용하여 다른 속성이 방해받지 않도록 잘 고안된 디자인으로 무장했다.
예를 들면, transform 속성에 여러 함수를 넣을 수 있지만, 속성을 또 쓰면 기존 속성은 무시된다. 즉, 병합이 안된다.
그래서 scale 및 rorate 둘 다 쓰거나, 둘 중 하나만 써도 해결 가능하도록 tailwindcss 자체에서 CSS 변수를 통해 해결하고 있다.
당연히 원한다면 사용자 변수를 사용할 수 있다. tailwindcss 는 완전한 클래스명을 넣어야 하는 단점이 있기 때문에, css 변수를 쓰면 동적 스타일을 쉽게 해결할 수 있다.

React를 예로 들면,

<div className="content-(--my-content)" style={ '--my-content': '뭐 임마' }></div>

이렇게 style로 주거나, 부모에 변수가 적용되는 등 여러 방법으로 가능하다고 보면 된다.

그래? 그럼 쓰던거 쓸래.

그래. 존중은 취향해 주겠다. 어자피 CSS는 답이 없다. 바닐라가 최선일 수도 있고, 컴포넌트화가 답일 수도 있고, 어쩌면 유틸리티 CSS가 관리하기 편할 수 있다. 선택은 자유다.

결론적으로 너희들 그건 인정해야지. CSS 속성 좆같이 많고 어렵잖아. 안그래?

끗.