먼저 Tailwind CSS를 알아보자면 Utility-First 컨셉을 가진 CSS 프레임워크 이다. Utility-First는 웹 애플리케이션을 디자인하고 스타일링을 하는 접근 방식이며 기능성과 효율성을 중시한다. 그래서 아래 예시를 보면 미리 정의된 유틸리티 클래스를 사용하여 빠르게 스타일링을 할 수 있다.
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<p className="text-2xl text-blue-400">hello world</p>
</div>Tailwind CSS 장단점
1. 장점
- CSS를 작성할 때 시간을 많이 절약할 수 있다.
- CSS 파일을 별도로 관리할 필요가 없기때문에 화면 분할을 하거나 파일을 옮겨다니지 않아도 된다.
- 클래스명 container, inner와 같이 클래스명 지정을 고민하지 않아도 된다.
- 자유롭게 스타일링을 커스텀 할 수 있다.
2. 단점
- 처음 스타일 클래스 속성을 익히는 시간이 필요하다.
- 클래스 속성에 여러개의 스타일을 지정하면 HTML 코드가 길어지고 복잡해져 가독성이 좋지 않다.
사용하면서 궁금한점?
1. 스타일 속성의 우선순위
// CSS
.container {
background-color: black;
background-color: red;
}
// Tailwind CSS
<div className="text-orange-500 text-pink-500">hello world</div>CSS와 Tailwind CSS의 스타일링을 보면 각각 같은 속성의 스타일이 중복 적용되어있다.
실제로 여기서 우선순위에 의해 나중에 적용된 스타일링으로 덮어지게 되어
CSS의 배경색상은 red 색상이 적용되고
Tailwind의 텍스트 색상은 pink로 적용된다.
그럼 여기서 각각 스타일 속성의 순서를 반대로 적용 해보면 어떨까??
< 위 스타일 속성의 순서를 반대로 적용 >
// CSS
.container {
background-color: red;
background-color: black;
}
// Tailwind CSS
<div className="text-pink-500 text-orange-500">hello world</div>이렇게 같은 스타일 속성을 처음 코드와 다르게 순서를 반대로 적용해보면 당연하게
CSS의 배경색상은 후순위인 black으로 덮어쓰게되며 black이 적용된다.
그럼 Tailwind CSS의 결과는 어떨까?
CSS와 같은 이유로 당연히 텍스트에 후순위인 orange가 적용되는줄 알았는데
Tailwind의 텍스트 색상의 결과는 pink가 적용되었다.
❓ 왜 Tailwind CSS는 스타일 순서를 바꿔도 후순위인 텍스트의 색상으로 변경되지않고 pink가 고정일까 궁금증이 생겼다.
찾아본 결과 Tailwind CSS의 빌드 결과를 보면 궁금증에 대해 알 수 있었다.
// Tailwind CSS 빌드 결과 보기
npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch
위처럼 해당 CSS 파일 경로를 입력하고 변환된 CSS 파일을 출력할 경로를 지정하게 되면 빌드 결과를 볼 수 있다.
✅ 빌드 결과 output.css를 보면 텍스트 스타일 속성 pink가 orange보다 후순위에 있는 것을 알 수 있다.
그러므로 Tailwind 클래스 속성에서 아무리 스타일 순서를 변경해도 빌드 결과의 스타일 순서에 따라 텍스트의 pink 색상이 후순위에 있기 때문에 적용되는 점을 알 수 있으므로 궁금증을 해소할 수 있었다.
2. apply 접근 방식
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border rounded-xl p-4 text-2xl text-green-600">
<p>hello world</p>
</div>프로젝트에 적용할때 위 처럼 스타일 속성이 길어지거나 같은 스타일 속성이 여러 요소에 적용될때 apply를 활용 했었다.
.centerStyle {
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border rounded-xl p-4 text-2xl text-green-600
}
<div className="centerStyle">
<p>hello world</p>
</div>위처럼 apply를 활용하면 길어져 복잡했던 스타일 속성이 더욱 깔끔하게 보여지고 같은 스타일 속성이 여러 요소에 적용될때 지정한 클래스명을 같이 활용했다.
❓ apply를 활용하려면 위 예시의 centerStyle 처럼 클래스명을 고민하고 지정해줘야 활용할 수 있다. 하지만 클래스명을 고민하지 않고 스타일링을 하는점이 Tailwind CSS의 장점인데 apply 활용하게되면 이런 장점을 잃어버리게 된다. 그럼 어떤식으로 apply를 활용하는게 맞는지 궁금증이 생겼다.
Tailwind 공식문서를 번역해서 보면 "단지 사물을 더 깔끔하게 보이도록 하기 위해 사용하지 마십시오"라는 문장을 토대로 apply를 사용시 주의할 부분 4가지를 알 수 있다.
- 항상 클래스 이름을 생각해야 합니다.
- 변경하려면 여러 파일 사이를 이동해야 합니다.
- 스타일을 바꾸는 것이 더 무섭습니다.
- CSS 번들은 더 커질 것입니다.
✅ 단순하게 긴 스타일 속성을 깔끔하게 보이게하기 위해서 apply를 사용하기에는 스타일 클래스 이름 고민해야하고 apply를 활용할수록 CSS 번들 크기가 커지게 되는 주의를 알 수 있다.
그러므로 apply를 사용할 경우 매우 작고 재사용성이 높은 항목에 활용하며 규칙을 정해 활용하거나 Tailwind 특성상 긴 클래스 스타일링의 복잡한 부분을 받아들이면 된다라는 생각이 들었다.
3. 스타일 속성 정렬
요소에 스타일링을 하면 규칙을 정하지 않는 이상 각각 스타일 속성의 위치를 자유롭게 입력하므로 일관성이 없고 길어지면 파악하기 쉽지않아서 종종 스타일 속성을 중복으로 적는 문제가 발생한다. 그럼 입력한 스타일 속성을 딱 정렬할 수 있는 방법이 있을까 생각했다.
Tailwind 스타일 정렬에 대해 찾다보니 Headwind 플러그인에 대해 알게되었다.
// 기존(Headwind 적용 안된) 스타일링
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border rounded-xl p-4 text-2xl text-green-600"></div>
Headwind 플러그인을 설치하고 스타일링 된 코드에 저장을 하게되면 위처럼 자동으로 Tailwind의 클래스를 정렬해주는 모습을 볼 수 있었다.
여기서 정렬되는 기준은 Tailwind CSS 빌드 결과에 나온 스타일 속성 카테고리 기준에 따라 정렬 된다.
이렇게 스타일 정렬에 따라 일관성 있게 유지하여 가독성도 향샹될 수 있는 점에서 도움 되는 플러그인이라고 생각된다.
🖇️ Reference
