Material-UI

Material-UI는 Google의 Material Design 시스템의 react 기반 구현 입니다.

Theming 기능을 통해 색상 및 폰트 수정이 가능합니다.

makeStyles를 사용하여 별도의 CSS, SASS, LESS 등을 사용하지 않고도 스타일을 변경할 수 있습니다.

CSS in JS인 JSS 방식을 사용합니다.

TailwindCSS

TailwindCSS는 utility first CSS framework로서 이 역시 별도의 CSS, SASS, LESS 등을 사용하지 않고 스타일을 변경할 수 있습니다.

기본적으로 Material-UI의 컴포넌트를 사용합니다.

부가적인 스타일은 className을 통해 TailwindCSS를 적용할 수 있습니다.

특별히 Material-UI 컴포넌트와는 별도로 새로운 컴포넌트를 만들고 스타일을 적용할 때 사용합니다.

다만 TailwindCSS의 색상관련 class를 사용하지 않습니다.

색상은 makeStyle로 전달한 theme관련 palette 값을 사용하여 별도의 class를 정의하여 사용합니다.

이렇게 할 경우, theming 기능을 사용하여 일관성있는 색생 변경과 dark mode 전환이 가능합니다.

한동안 Material-UI 기반의 프로젝트에서 TailwindCSS를 css 대신 사용해 보았습니다.

주로 margin, padding 등 layout이 필요한 경우 사용 하였고, 앞서 설명드린 것 처럼 색상 값은 theme의 palette 정보를 사용했습니다.

TailwindCSS를 사용하면 css 번들링 최적화를 위해 purge 기능을 사용해야 합니다.

이로인해 로컬 개발환경 구동 시, 약간의 시간을 더 잡아 먹습니다.

개발자는 makeStyle과 TailwindCSS 중 어떠한 방식으로 해야 할지 매 순간 결정해야하고.

두 방식 모두 익숙하지 않은 경우, 결정을 하고도 쉽지 않은 작업이 됩니다.

그리고 Material UI theme 설정에는 색상과 함께 space, shadow, radius 등의 다양한 값이 있음을 알게 되었습니다.

근본적으로 TailwindCSS를 사용하는 것은 컴포넌트 스타일의 이식성을 높기기 위함인데요.

Material UI를 기반으로 작업할 때, makeStyle을 사용하지 않고 스타일 작업을 하기란 쉽지 않습니다.

따라서, 이식성을 위해 사용한 TailwindCSS의 가치가 떨어지게 됩니다.

정리하면, 부가적인 설정으로 빌드와 작업의 복잡도가 늘어나게 됩니다.

그리고 layout style을 제외한 나머지는 Material-UI의 theme에 의존해야 하기 때문에 사실상 이식성이 떨어지고 짬뽕이 된 코드만 남게 됩니다.

따라서, TailwindCSS 사용을 하지 않게되었고 향후에도 design system이 잡혀 있는 프로젝트에서는 사용하지 않는 것이 바람직하다고 잠정 결론을 내려 봅니다.