A few days ago I posted a new blog post in which I detailed my experience with styled-components, and how it was a nice way of incorporating dynami...
For further actions, you may consider blocking this person and/or reporting abuse
Neither for me. Tho if I have to choose, I would go for styled-components.
The reason being, Tailwind is like an entirely new tool, nothing common with CSS syntax. And knowing how frequently frameworks come and go, I am not sure it's worth investing time in learning something as specific as Tailwind.
It took me about 30 minutes to learn Tailwind so I wouldn't say it's a waste of time. on the contrary, it saves me alot of time when I make small projects compared to regular styling.
as for styled components, I don't see a big difference between that an inline styling so I'd skip it.
I like this comment, I think Tailwind is really helpful for big project but we just need take time to learn it
Thanks for the input! 🙏❤
Agreed! I think Tailwind solves a specific problem and solves it well. But it doesn't solve all the other problems very well. Personally, I feel it's always more beneficial to know how things work under the hood. Having to write CSS still enforces that practice whereas Tailwind doesn't.
Currently, my favs are CSS modules or Styled JSX, depending on whether I want to style outside or inside of the component, respectively. Both are scoped and support bare CSS, which I love.
Oooh, I'll take a look into those two at some point. Would you favour either of them against styled-components?
I like CSS modules or Styled JSX as both work well with NextJS, which I work with daily. Both have built-in support, meaning I don't have to worry about configuring anything.
I prefer Styled JSX over SC, as it is more close to bare CSS, and CSS modules are not CSS-in-JS solution, so it would not be fair to compare them with SC.
If you are looking for other alternatives, I would suggest looking into Svelte. It allows us to write CSS in style tags, while still working with components. A 'back-to-basics' approach, I really like.
You don't understand how well tailwind solves the maintainability problem, you don't understand that styled-components uses css in JS, for big projects with high render frequency even with code splitting you are going in the wrong direction with styled-components, same for MaterialUI, ChakraUI....You juste don't understand that using tailwind is like writing css files, and everyone know in terms of performance nothing beat pure css of course, there is absolutely 0 disadvantage using tailwind compared to all other css frameworks, simply because tailwind is css
Great comment, all valid points and I hope this can help people make their own informed decision further🙏🏻
What ??
Tailwind comes with a number of disadvantages as mentioned in the post starting from readability when stylings for a basic component increases where you'd end up having more classes. You are NOT using vanilla css btw, its a library, which has to do something in order to convert your classes to actual styles.
Hello! I am a front-end fan, I come from China. I just read your article and feel it's very good. You analyzed the styled component and tailwindcss rationally. Can I translate your article into Chinese and put it on the Chinese blog website
Of course you can!
Thanks for this write-up! Nice comparison of where TailwindCSS or Style-Components might be a better option. Our team is in the early stages of a big front-end project, so choosing the right approach to styling is a key concern and your article has really added some clarity to the decision.
be aware with styled components I had huge performance problems with css in js I thought it would not matter for my personal projects but even there I had really poor performance for mobile devices
My personal opinion is that Tailwind is overhyped. Software engineers started polluting HTML with a mass of CSS classes. Example:
flex border w-full dark:border-matteGray rounded-2xl h-[80vh] border-lightGray overflow-hiddenWhich not only increases HTML size but also makes it very hard to understand what follows.
Compare with:
Not to mention that there have already been preprocessors like Sass for years, and even CSS is evolving with variables and the like.
Then you will have the following HTML:
It will be a long time before software engineers realize that using dozens of CSS classes leads to a jungle in which everyone will spend more time analyzing what the code does and what the author intended.
You didn't talk about the page performances on using tailwind and styled-components.
Ahhhh I like that! Throughout building my Tailwind app I've noticed the lack of animations and have had to resort to CSS. But never thought to combine the two! I like the approach!
Even if you are following atomic design, for an atom, say a button, if it involves complex animation and styles there is no way to avoid having more classes imo.
Like, say if you are making this button atom reusable and want to use some additional stylings/change stylings for the same button component, how would you go about it without adding more classes OR without using css in js via props as in SC ??
👍
if you choose to go with TailwindCSS and React, checkout my boilerplate:
github.com/altafino/react-webpack-...
Nice one! Looks good
Like both as they can be integrated with one another using tailwind macro.
Tailwind Macro!? What is that?
Sorry, Twin.macro I didn't even realized I typed it wrong. It a NPM pakage that gives developers the power to blend in tailwind css and styled components as well.
Check out the docs
npmjs.com/package/twin.macro
+1, twin.macro blends both together and is IMHO a real nice library to combine with Tailwind in React apps!
What was your use case for using a combination of both of them?
Exciting discussion! 🚀 As a React enthusiast, I'm curious to hear your experiences with TailwindCSS and Styled-Components. Any insights on when you prefer one over the other?
Both are cool. For smaller projects, i will go with styled-components but for larger projects i will go with tailwind.
That been helped for me to learn Tailwind
I would go with styled-components:
bundlephobia.com/package/styled-co... is 12.7kB
versus:
bundlephobia.com/package/tailwindc... 133.09kB
but you only need the classes that are used in your project the other css classes would be removed in post processing and don't only think about bundle size I had more problems with render performance for css in js also for react 18 I would not choose cas in js for my next projects
thank you so much. Now i get the favourable styling abilities of tailwind CSS.