Facebook Tried Tailwind, Then Built This Instead
Facebook is constantly pushing the boundaries of web development, and one area they’ve been experimenting with is CSS frameworks. In a recent blog post, the Facebook engineering team revealed that they had initially tried using the popular Tailwind CSS framework for their projects, but ultimately decided to build their own solution instead.
The Facebook team found that while Tailwind provided a lot of flexibility and utility, it also led to a large amount of unused CSS in their applications. This made the overall file size of their CSS quite large, which in turn impacted page load times and performance. Additionally, they found that managing the enormous amount of utility classes provided by Tailwind became burdensome over time.
To address these concerns, Facebook created its own CSS framework called FB-Twind. This framework focuses on providing a more optimized and streamlined approach to utility-first styling, while also incorporating Facebook’s own design language and best practices. With FB-Twind, the Facebook team was able to significantly reduce the amount of unused CSS and improve overall performance.
While Tailwind has garnered a lot of popularity in the web development community, Facebook’s decision to build its own framework instead demonstrates the importance of choosing the right tools for the specific needs of a project. It also showcases Facebook’s commitment to continually innovating and optimizing its web development processes to deliver the best possible user experience.
The whole concept of tailwind is that you don't have to write anything that resembles CSS, this StyleX approach could get messy very quickly and it will slow you down.
This can't be direct compared to tailwind rather than a tool that can help tailwind write better code, instead of inline string, now tailwind can be rewritten to be more flexible in js way. Imagine, tailwindcss will be having a plugin using stylex that transform all exited classname style into javascript reference, much more dynamical than just a className string alone.
Stylex pre-dates Tailwind it's been used in facebook/meta for a very long time.
Isn't this basically how react-native stylesheets work?
The more you write CSS, and understand design. The more you will notice you will not need these tools. That is what I realized as a front-end developer. Boostrap, Tailwind, etc. Are great for those who doesn't know how to create thier own neat scalable design systems, within 1 hour with (S)CSS. Facebook just made thier own design system it seems, and was nice enough to share with its community.
They didn't even bother to buy a domain name? hmm. smh
I always thought react native styling is superior. This looks the same. Good
looks like tailwind variants and i guess CVA
so just what was already available in React Native then
Naa, thanks. I'll pass …
I like the pattern they followed, but being able to see all element's styles in one file is a huge help with Tailwind.
Curious, but immediately turned off by having to name things again.
I like stylex features for the same reason I liked pandacss when it first came out, but switching from tailwindcss is no bueno for me.
1. I don't miss naming things
2. I dislike the object syntax for styles.
Tailwind might be messy and repetitive e.g focus, active, dark mode states but it is still pretty readable. I can tell at a glance what classes are being applied on a component or easily debug issues. I really don't mind adding plugins like tailwind-merge and class-variance-authority.
Thsnks, I hate it.
I absolutely hate tailwind. Loving this…
shadcn is the shit
This is just panda css but worse
I am trying stylex on a school project. But there is absolutely no help online for some bugs I encounter while setting it up.
This is my error
Error: stylex.create should never be called. It should be compiled away.
TW doesnt scale??? How? If you want to scale styles in component based frameworks – you are doing something wrong.
nope sticking to tailwind