[한경xToss] 🍓추가공부) Tailwind CSS Media Queries / 테일윈드 반응형 스타일 처리 / 미디어쿼리 접두어

 

궁금했던 것 :

Tailwind 미디어쿼리에서 화면 너비가 sm보다 작은 상황은 어떻게 처리되나?

Tailwind의 장점, 단점은 무엇인가?

---

수업시간에 Tailwind를 처음으로 배웠다 (FE개발자 맞나요..?)

 

우선 Tailwind란,

유틸리티 클래스 기반의 CSS 프레임워크이다.

미리 정의된 클래스를 사용해 HTML에서 직접 스타일을 적용할 수 있고,

기존 CSS 작성 없이 빠르게 레이아웃과 디자인을 구현할 수 있다.

 

 

<!-- md=미디어쿼리 : pc버전일때는 row(가로), 모바일 버전에서 col -->
<div class="flex md:flex-row flex-col border-4 border-red-300 m-3">

 

미디어 쿼리에서는 위 코드와 같이, 반응형 접두어를 사용한다.

 

• sm: 640px 이상

• md: 768px 이상

• lg: 1024px 이상

• xl: 1280px 이상

• 2xl: 1536px 이상

 

여기서 내 생각

 

원래 웹페이지 CSS를 처음에 PC 기준으로 만들고, PC/tablet/mobile 순서로 미디어 쿼리를 작성하잖아
근데 Tailwind 접두어로 모바일 미디어쿼리를 어떻게 작성하라는 거지?
가장 작은 기준이 sm인데, viewport 640px 이하인 경우는 어떻게 선언하는거임?

 

이런 궁금증이 생겨서 찾아보게 되었다.

 

여기서 알게 된 엄청난 사실

 

Tailwind는 모바일 우선 접근 방식을 사용하므로,

기본값이 모바일(작은 화면)에 적용되고, 반응형 접두어를 사용하여 더 큰 화면에 대한 스타일을 설정하는 것.

 

 

그니까 원래 내가 생각하던 반응형 개발 순서는

PC css 개발 후,

@media screen and (min-width: 768px) and (max-width: 959px)

@media screen and (max-width: 767px)

 

이렇게 작은 화면을 추가 설정해주는 순서였는데

 

Tailwind는

mobile 기준으로 css 개발 후 -> md일 때 : ... , lg일 때 : ... 

이렇게 큰 화면 스타일을 나중에 설정하는 거였다

 

---

Tailwind의 장점
- 코드가 더 짧아지고 유지보수가 용이합니다.
- 클래스 기반이므로 HTML에서 직접 스타일을 관리할 수 있습니다.

 

-> style태그 쓸 때보다 코드 줄 수가 짧아지는건 맞는 것 같은데

그냥 css 파일 따로 관리하는게 더 효율적일 것 같은 느낌?

하지만 내가 익숙하지 않아서 그렇게 느낄수도 있으니 추가 정보를 찾아봄

 

Tailwind CSS의 단점
- HTML의 가독성 저하
- 복잡한 커스터마이징
- 팀 협업 시 러닝 커브

 

확실히 단점이 존재하긴 한다.

 

간단한 스타일 수정에는 편한 게 맞지만, flex나 반응형 등이 들어가면 기존 css보다 더 복잡해지는 것 같고

요소가 많아질수록 가독성이 떨어질 것 같음

협업에서 사용할거면 스타일 도구를 하나로 통일해야할 것 같다는 생각이 들었다 (← 하지만 바로 생각 바뀜)

---

마지막으로 강사님께도 여쭈어보았고, 아래와 같은 답변을 받았다~~! 

tailwind가 좋긴한데, html이 복잡해지는 단점이 있다.
물론 현업에서는 아직도 일반 css나 sass,scss를 많이 사용함
다만 협업할 때는 일반 css 를 사용하면 제각각 디자인 스타일이 달라져서, 초기 협업시에는 그냥 tailwind를 사용하면 가독성이나 범용성이 더 좋다
혼자 작업하거나, 어떤 개발팀에서 스타일을 미리 정의하고 사용한다면, 어떤 형태로 작업해도 상관없다
자주 사용하는 tailwind 요소나, 템플릿은 미리 정의해서 사용하면 좀 덜 복잡하게 만들 수 있다
리액트는 원래 컴포넌트 기반이라 컴포넌트를 잘 만들어 놓으면, 재사용성을 높일 수 있다
리액트에서는 html/css가 하나의 덩어리 - 컴포넌트로 움직이니까 상위 레이어에서 보면 tailwind가 오히려 심플하게 보임

 

⇒ 컴포넌트 요소를 만들 때, css를 tailwind로 정의해놓으면, 스타일과 함께 재사용하기 매우 편함

 

이걸 알고 나니까 css + tailwind 혼용해서 쓰는게 나쁘지 않을 것 같다는 생각이 들었다!!

나중에 리액트 프젝에서 한번 써봐야겠음

 

---

결론: 어떤 방식이 더 효율적일까?

 

1. Tailwind CSS가 적합한 경우

        • 빠른 프로토타이핑이 필요할 때

        • 스타일의 통일성이 중요할 때

        • 팀원들이 Tailwind를 이미 잘 알고 있을 때

2. CSS 파일 관리가 적합한 경우

        • 프로젝트가 크고 복잡하며 디자인 시스템이 정립되어 있을 때.

        • 팀 내에서 HTML과 스타일을 명확히 분리하고 싶을 때.

        • Tailwind의 클래스 기반 스타일이 가독성을 해친다고 느낄 때.

 

 

혼용 시 주의할 점

1. 중복 주의 및 우선순위 관리 ‼️
2. 설치 및 path 선언
3. 가독성 저하

---

느낀점 :

 

처음에는 비효율적인 것 같다고 생각한 테일윈드..!

자세히 알아보니 꽤나 매력적인 친구였다

 

React는 컴포넌트 기반이라, Tailwind와 궁합이 좋음 (컴포넌트 재사용 편리)

하지만 협업에서는 팀원들과 잘 협의한 뒤에 사용해야할 것 같다.

어떤 상황에서 사용할 것인지, 가독성을 너무 해친다면 어떻게 할 것인지 등을 충분히 고민해봐야 할 듯