styled-components vs emotion vs tailwind

React 를 사용하다보면 CSS-in-Js 를 많이 사용하게 되는데, 나는 프로젝트할 때, styled-components만 사용해봐서 다른 라이브러리도 궁금하고 써보고 싶어서 찾아보았다.

---

 

우선 요새 트렌드는 emotion의 사용량은 떨어지고 있고, tailwind와 styled-components가 엎치락뒤치락하면 인기를 누리고 있는 추세인 것 같다. 이 기술들의 차이는 어떤게 있을지 궁금해졌다.

최근 6개월간 트렌드 분석

참고

---

우선 차이점을 보자면

	LibraryAttaching Props	Media Queries	Global Styles	Nested Selectors	Server Side Rendering	Theming Support	Composition
styled-components	YES	YES	YES	YES	YES	YES	YES
emotion	YES	YES	YES	YES	YES	YES	YES

참고

구현방법

styled-components

// CSS syntax in tagged template literal
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`
render(<Title>Hiya!</Title>)

// Object syntax
const button = styled.button({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
});

emotion

// CSS syntax in tagged template literal

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>Hey! It works.</Button>)

---

render(
  <h1
    className={css`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `}
  >
    Hiya!
  </h1>
)

// Object syntax
const titleStyles = css({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
})

render(<h1 className={titleStyles}>Hiya!</h1>)

tailwind

<template>
  <ul class="divide-y divide-gray-200">
    <li v-for="person in people" :key="person.email" class="py-4 flex">
      <img class="h-10 w-10 rounded-full" :src="person.image" alt="" />
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-900">{{ person.name }}</p>
        <p class="text-sm text-gray-500">{{ person.email }}</p>
      </div>
    </li>
  </ul>
</template>

---

 

 

tailwind는 코드가 좀 길어지는 경향은 있으나 공식문서에 ui에 따른 코드가 있었고, 따로 이름을 지어줄 필요가 없어서 styled-components보다는 쓰기 편리할 수도 있겠다는 생각이 들었다.
공식문서: https://tailwindui.com/