Is it recommended to use CSS In JS technique in React?

React does not have any opinion about how styles are defined but if you are a beginner then good starting point is to define your styles in a separate *.css file as usual and refer to them using className. This functionality is not part of React but came from third-party libraries. But If you want to try a different approach(CSS-In-JS) then styled-components library is a good option.

Practical Code Example

// CSS-in-JS:
// Zero-runtime solutions (Tailwind CSS, Vanilla Extract) are preferred over runtime CSS-in-JS
// because runtime libraries add JavaScript bundle weight and slow down React Server Components (RSC).