_mercury•3y ago

Tailwind vs styled components with React

I don’t know why but I think may be styled comps are better . What’s your opinion?

11 Replies

Unknown User•3y ago

Message Not Public

_mercury•3y ago

Aha so Tailwind?

Unknown User•3y ago

Message Not Public

Guilherme (Flutter)•3y ago

imo tailwind wins when talking about productivity and performance for some reasons. Productivity - With tailwind I don't have to name stuff. While with sc I'm declaring a new component, with tailwind I already started using the utilities on a className - styled-components may not be even the best css in js solution, but that's for another discussion. The syntax of theme variables and transient props could be better. Tailwind also has some weird syntaxes (try using an arbitrary value for box-shadow :v), but you'll encounter these cases way less Performance - SC is js in the end, which is costly for the browser to parse and compile.

Unknown User•3y ago

Message Not Public

Guilherme (Flutter)•3y ago

Hi @Syntax do you have resources that says the performance note with SC is outdated? I mentioned worse performance when talking about css-in-js with SC because is literally a problem I have. I've been using it for years on an app and when I had to achieve better pagespeed scores, a problem noted was that we had too much JS (that was blocking the main thread), seeing the chunks of js it was some styled components js that took a long time to parse and read --- Btw here's a comparison between a css in js framework that ships CSS and SC which outputs JS https://pustelto.com/blog/css-vs-css-in-js-perf/ The performance gain of just shipping CSS instead of JS should be easy to notice imo, since it's clear that JS is one of the most heaviest resources for the browser to compile About productivity, could you have some example of a situation which SC is better to write than tailwind when talking about dynamic styles? Passing a prop to then conditionally do a style is more work than simply apply a class when necessary For the conclusion, yes, there's a winner on productivity and performance. Here's a real use case of 75 to 90 of performance by just changing from SC to tailwind https://daily.dev/blog/why-i-moved-from-styled-components-to-tailwind-css-and-whats-the-future-of-css-in-js Anyways I agree that both are great. I would use just what my team is more comfortable with so they don't have to learn a new framework. (If I have the right, I would suggest SCSS modules instead of SC because of performance)

Unknown User•3y ago

Message Not Public

Guilherme (Flutter)•3y ago

Using classnames with tailwind is more clean and faster to type for this case

className={classNames('flex-1', {
  'bg-white': dropping,
  'opacity-60': dragging,
})}

className={classNames('flex-1', {
  'bg-white': dropping,
  'opacity-60': dragging,
})}

The productivity discussion may be subjective for a lot of cases, but with SC the fact that you have to give name to things is already a downside that's not up to subjectiveness at all Idk what's your take on performance then, since it was based on my comment about SC downside over tailwind (JS vs CSS being shipped). In the end an app with tailwind will have better pagespeed scores than some with SC

Unknown User•3y ago

Message Not Public

Guilherme (Flutter)•3y ago

damn that's great, what kind of app have you been building? Got it

Unknown User•3y ago

Message Not Public