Style, CSS 뭐 써볼까?

• RSC 관련 (styled-components to tailwindcss)

TL;DR

현재로서는 서버 컴포넌트에서 CSS-in-JS가 작동하지 않는 것으로 밝혀졌습니다. 이 점이 아쉬웠습니다. styled-components에서 Tailwind CSS로 전환하는 것이 RSC 전환의 가장 큰 부분이었지만, 수고할 만한 가치가 있었다고 생각합니다. CSS-in-JS에 올인했다면 할 일이 좀 많을 수도 있습니다. 그래도 더 나은 것으로 마이그레이션할 수 있는 좋은 기회인 것은 분명합니다.

 

We migrated 50,000 lines of code to React Server Components | Mux

• Next.js docs

Next.js supports different ways of styling your application, including:

• Global CSS: Simple to use and familiar for those experienced with traditional CSS, but can lead to larger CSS bundles and difficulty managing styles as the application grows.
• CSS Modules: Create locally scoped CSS classes to avoid naming conflicts and improve maintainability.
• Tailwind CSS: A utility-first CSS framework that allows for rapid custom designs by composing utility classes.
• Sass: A popular CSS preprocessor that extends CSS with features like variables, nested rules, and mixins.
• CSS-in-JS: Embed CSS directly in your JavaScript components, enabling dynamic and scoped styling.

Warning: CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React, including concurrent rendering.

We're working with the React team on upstream APIs to handle CSS and JavaScript assets with support for React Server Components and streaming architecture.

The following libraries are supported in Client Components in the app directory (alphabetical):

• [kuma-ui](<https://kuma-ui.com/>)
• [@mui/material](<https://mui.com/material-ui/guides/next-js-app-router/>)
• [pandacss](<https://panda-css.com/>)
• [styled-jsx](<https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-jsx>)
• [styled-components](<https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components>)
• [style9](<https://github.com/johanholmerin/style9>)
• [tamagui](<https://tamagui.dev/docs/guides/next-js#server-components>)
• [tss-react](<https://tss-react.dev/>)
• [vanilla-extract](<https://github.com/vercel/next.js/tree/canary/examples/with-vanilla-extract>)

The following are currently working on support:

• [emotion](<https://github.com/emotion-js/emotion/issues/2928>)

Good to know: We're testing out different CSS-in-JS libraries and we'll be adding more examples for libraries that support React 18 features and/or the app directory.

If you want to style Server Components, we recommend using CSS Modules or other solutions that output CSS files, like PostCSS or Tailwind CSS.

Tailwind와 CSS Modules가 동표였지만 TailwindCSS 팬은 많은 반면 CSS 모듈은 상대적으로 적은데 이유를 알고 싶은 사람 그리고 새롭게 시도해보기 좋은 프로젝트라 TailwindCSS로 결정.