Facebook Tried Tailwind, Then Built This Instead

I spend a lot of my day in CSS so I don't see CSS specificity as any sort of issue and if anything I appreciate it. But its interesting how often I see devs complain about it and try to get rid of it in these libraries.

That comparison table is a bit suspicious to me. Someone tried really hard to make this look better than it is. For example, styled components definitely support composition, and dynamic styles. And even the object style format (optionally).

Last I checked the eslint validator didn’t work at scale.

No.

Tailwind better. Yes it is.

isnt this the same as stylesheet in react native?

Or the framework could just use the actual platform with shadow Dom to have scoped styles that can share the same file and will not produce all those stupid class-hash stuff, but using anything the browser just offers seems to be against everything the most people want… I would just use the newest css features maybe with post css to make it for old shitty browsers but just use the platform is always the best way. I can live with polyfill but frameworks and stuff should work that in the future it needs less code - not more as the browsers and the features progress

This just seems like normal css but harder.

This is just react native stylesheet.

We need an update of this video

the idea looks promising, sometimes I'm being lazy and write a const someComponentStyle = `some tailwind classes` and just reference that in multiple element/components' className and styleX might solve that(?), being able to have a centralized piece of code to update the style

This project seem like dead, no update from 2021

It's funny how 95% of the comments on here are people who have 0 idea what they're talking about and are extremely confident about it...🤣

Have you ever tried UnoCSS? I replaced some time ago Tailwind by UnoCSS, I have all the power of tailwind but Is more customizable and is on demand. Maybe you can do a video about it :)

how the f*ck is different that classNames and scss modules ? I just want to say to React lib devs to go f*ck themselves at this point.

Oof, this is not a better alternative to tailwind at all

In TailwindCSS, CSS is the base knowledge, nothing more, except for the class names lol.

Go to vacation and get back after 3 weeks, you likely dig again to MUI docs for reference or similar framework, It just too much of "cognitive overhead". To add, once the framework updates there are more to dig in to docs.

Here's my top 2:
1. TailwindCSS for the win.
2. Styled-components

Why use flow if you then have to also write more type for Typescript to support the same types that flow can't provide... That seems so contrary to the philosophy of the stylex project. And when it goes open source, who'll even want to touch it ¯\_(ツ)_/¯

must be nice for the guys at facebook to just experiment with different things
while us normal devs use solutions to reduce the time spent because out boss breathes down our neck to finish things faster

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…

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

This is not a new pattern at all. There has been JSS since couple years already... And now there are bunch of others as well...

I am still using sass modules for pretty much everything. It works. I hate writing any media queries so a function does it all. I also use twbs /rfs for font sizes and container padding mainly. I don't know if I can do it without rfs in the future. I am just afraid that rfs might die one day.

Have you heard of vanilla-extract css?

The C(ascading) in CSS is an implementation detail, just that no one implemented it! It is up to our poor brains to go "How the heck should things cascade in order for this to happen? and how to achieve this using the minimal number of selectors?" instead of the other way around; I guess we never questioned it because it made us smart CSS Engineers instead of color pickers.

Why do you look so scary? Are you not blinking enough, or is it the combination of blonde hair with a dark mustache? Thank you for the interesting videos!

this look like react-native and styled-component ........i like tailwind cause i don't have to name a class name or a component so meh for me

What the fuck

Nothing new. However, css-in-js is created for only one purpose - cross-platform styling. And this is a big problem. We are no longer waiting for these cool CSS features in the browser. Because we are targeting the mobile platform. What a disgrace.

To me, I think you summarised it pretty well with StyleX requiring more "cognitive overhead" which is something I as a developer am not interested in.

Have you seen panda-css?

Why just not use SASS?

It doesn't scale lol? haha it's the definition of scaling with modeler components and tailwind.configs ...