Tailwind에서 CSS로 옮길 때 남겨야 할 규칙

Tailwind의 유틸리티 클래스를 직접 작성한 CSS로 교체할 때는 기존 화면의 색상, 글자 크기, 간격을 유지할 방법부터 정합니다. 클래스 이름을 지우기 전에 각 클래스가 생성하던 CSS와 공통 디자인 값을 확인해야 합니다.

Julia Evans의 CSS 전환 기록에서는 Tailwind의 reset과 디자인 값 일부를 유지하고, 컴포넌트별 스타일과 배치 규칙을 직접 관리한 과정을 설명합니다. 아래에서는 이 경험을 바탕으로 도구를 교체할 때 보존할 규칙과 검증할 조건을 정리합니다. 코드와 상품 카드는 원문의 프로젝트를 재현한 것이 아니라 직접 작성한 예시입니다.

반복해서 쓰는 디자인 값

색상이나 글자 크기를 컴포넌트마다 임의로 적으면 같은 역할의 값이 조금씩 달라집니다. CSS 변수에 공통 값을 정의하면 개발자는 값을 바꿀 위치와 그 값을 사용하는 컴포넌트를 확인할 수 있습니다.

:root {
  --color-text: #242424;
  --color-link: #2457c5;
  --text-body: 1rem;
  --text-heading: 1.5rem;
}

.article {
  color: var(--color-text);
  font-size: var(--text-body);
}

이 코드는 설명을 위한 예시입니다. 프로젝트에 이미 색상과 타이포그래피 규칙이 있다면 그 값을 유지할 수 있습니다. 도구를 교체하는 작업과 화면 디자인을 바꾸는 작업을 한꺼번에 진행하면 결과가 달라진 이유를 확인하기 어렵습니다.

reset은 브라우저 기본 스타일을 덮어써 공통 초기 스타일을 정하는 CSS입니다. 전환할 때는 기존 reset의 어떤 규칙에 화면이 의존하는지 확인합니다. 예를 들어 box-sizing: border-box는 지정한 너비에 padding과 border를 포함하도록 계산 방식을 바꿉니다. 기존 화면이 이 규칙에 의존했다면 제거 후 너비가 달라질 수 있습니다.

직접 만든 상품 카드와 CSS 예시입니다. 카드 안쪽 여백과 목록의 gap을 분리해 표시했습니다. 실제 프로젝트의 화면은 아닙니다.

파일 분리와 선택자의 범위

Evans는 컴포넌트마다 고유한 클래스와 파일을 사용했습니다. 한 컴포넌트의 CSS가 다른 컴포넌트의 스타일을 바꾸지 않도록 관례를 정한 것입니다. 파일을 나눴다는 사실만으로 선택자의 영향이 격리되는 것은 아닙니다.

.product-card {
  border: 1px solid #ddd;
  padding: 1rem;
}

.product-card .title {
  font-size: var(--text-heading);
}

전역 .title을 수정하는 것과 카드 안의 제목을 수정하는 것은 영향 범위가 다릅니다. 선택자, 상속, 우선순위를 확인해야 파일 분리의 목적을 지킬 수 있습니다. 실제 격리가 필요하다면 프로젝트가 사용하는 컴포넌트 스타일 방식과 브라우저 지원도 함께 검토합니다.

카드 사이의 간격을 정하는 부모

여러 카드가 각자 바깥 여백을 지정하면 배치에 따라 간격을 조정하기 어려울 수 있습니다. 아래 예시는 부모의 Grid 레이아웃에서 gap으로 카드 사이의 간격을 정합니다. 카드 안쪽 여백은 각 카드의 padding으로 관리합니다.

.card-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

예시의 CSS를 적용하면 사용할 수 있는 폭에 따라 카드 열 수가 바뀝니다. 화면 크기마다 열 수를 직접 나열하는 방법과 비교할 수 있습니다. 다만 카드의 최소 너비와 늘어나는 범위가 제품에 맞는지는 실제 콘텐츠를 넣어 확인해야 합니다.

전환 전후를 비교할 기준

전환할 컴포넌트의 색상과 글자 크기, 선택자 범위, 간격을 먼저 적습니다. 기존 화면의 값이 어디서 적용되는지 알면 새 CSS와 비교할 기준이 생깁니다.

카드 하나를 옮긴 뒤에는 좁은 화면과 긴 제목에서 기존 배치가 유지되는지 확인합니다. 파일 크기나 개발 속도의 변화는 이 화면 검사와 별도로 측정합니다.

전환 기록에는 기존 클래스와 새 선택자의 대응 관계, 공통 값의 정의 위치, 검사한 화면 조건을 남깁니다. 다음 개발자는 이 기록으로 값이 달라진 원인을 확인하고 같은 규칙을 적용할 수 있습니다.