시작
최근 새롭게 시작한 사이드 프로젝트가 있다.
React, Tailwind v4 기반으로
v3 구조가 아닌 v4 구조로 진행하기로 했다.
스타일을 구조화 하는 단계에서
tailwind v4의 레퍼런스는 적었고
이게 맞나..? 생각만 많아졌다.
그런 점에서 완전히 해소 되지 않겠지만
어느 정도 이해가 됐고 이후 팀원 분과 디자인 토큰 등 다시 개선해 보기로 했다.
1. @theme, root: 뭐가 다르지?
@theme 지시어에 디자인 토큰을 담을 수 있다.
그렇다면 root: 에서도 변수 선언 방식으로 디자인 토큰을 관리 할 수있는데 이 두가지의 차이점은 뭔가 싶었다.
결론은 유틸리티 클래스 형식으로 사용할 것인지에 따라 사용 법이 다르다.
- 디자인 토큰을 유틸리티 클래스에 직접 매핑하려는 경우
@theme사용 - 해당 유틸리티 클래스가 없어야 하는 일반 CSS 변수를 정의하려면
:root사용
2. @theme, @theme inline의 차이는 뭐지?
디자인 토큰을 @theme {} 에 삽입하면 tailwind는 변수 선언으로,
@theme {
--color-primary: #f0f0ff
}
.bg-primary {
background-color: var(--color-primary);
}@theme inline {} 에 삽입하면 인라인 스타일로 생성한다.
@theme inline {
--color-primary: #f0f0ff
}
.bg-primary {
background-color: #ff0000;
}- 간단한 정적 테마, 빠른 빌드, 변수 관리 귀찮을 경우
@theme inlline사용 - 기본 방식, 동적으로 색상 변경 필요시
@theme사용
3. @apply는 언제 사용하는 건지?
나는 tailwind을 사용한다면 tailwind 방식으로 가는게 맞지 않나 싶었다.
그래서 css에 @apply 지시어를 통해 tailwind 유틸리티 클래스 처럼 관리했다.
다만, @apply를 너무 남발하면 좋지 않다고 한다...!
taillwind의 고유 규칙을 깨는 행위이고, 번들 용량도 증가한다고 한다.
tailwind는 미리 정의된 클래스명을 조합해 스타일을 바로 구성한다.
<div className="block w-full bg-gray-100 rounded-md h-5"/>만약 하단 block라는 클래스 명이 존재할 경우
기본 CSS의 우선순의를 따르게 되고 다른 곳에서도 영향을 줄 수 있다.
.block {
@apply w-full bg-gray-100 rounded-md h-5
}겉으로 보기엔 깔끔해 지고 tailwind의 방식을 지킨다고 생각했는데
그게 아니였다...
그럼 언제 사용해야지?
- @apply 지시어는 기존 유틸리티 클래스를 사용자 정의 CSS에 인라인으로 추가한다.
- 이 기능은 사용자 정의 CSS(예: 타사 라이브러리의 스타일을 재정의하는 경우)를 작성해야 하지만 여전히 디자인 토큰을 사용하고 HTML에서 사용하는 것과 동일한 구문을 사용하려는 경우에 유용하다.
즉, 다른 라이브러리 중 클래스 명이 겹쳐 스타일 지정이 필요할 경우에만 사용하는 것이 좋다고 한다.
4. @layer base, components, utilities?
@layer 지시어 앞에 base, components, utilities가 붙는걸 알 수 있다.
base는 전역적으로 사용될 스타일을 줘야할 경우 사용하는데
components, utilities는 언제 사용하고 왜 3가지로 분리했지? 라는 의문이 생겼다.
base
- 전역적으로 사용될 스타일을 정의하고 3가지 중 가장 우선순위가 낮다.
- 주로 body, font, a, h1 등
components
- 재사용 가능한 컴포넌트 관련 스타일을 정의하는데 사용한다.
- 여러 유틸리티 클래스를 조합해 하나의 UI 컴포넌트로 만들 때 사용된다.
- 주로, card, button 등
utilities
- 3가지 중 가장 우선순위를 갖는다.
- 단일 클래스를 정의할 때 사용한다.
- 주로 작은 단위의 스타일을 정의할 때 사용된다.
우선순위
utilitiescomponentsbase
마치며
지금 까지 tailwind를 사용하면서도 가장 기본적인 유틸리티 클래스를 조합해 사용만하고 세세한 구조를 제대로 파악 할 생각을 못했던 것 같다...ㅠ
특히 @apply 지시어는 공식문서 조금만 참고해도
나왔을 텐데 제대로 숙지하지 않는 상태에서 남발 했던 것 같다.🥹
이번 기회에 tailwind에 대해 다시 알게 되었고
공식문서를 꼼꼼히 확인해야 한다는 점도 다시 깨달았다.
간단하게 알게된 부분은 여기로
참고
https://tailwindcss.com/docs/theme
https://tailwindcss.com/docs/functions-and-directives
https://velog.io/@lky5697/5-best-practices-for-preventing-chaos-in-tailwind-css
