no way this gonna kill tailwind css.

my favorite thing about tailwind is not having to come up with unique classnames or importing or exporting or compiling

The most important feature in the tailwind for me is that I don't need to keep my styles separate from the elements and immediately can add, or fix something. I can already tell, that there will be so much pain to use this library

I'm thinking about just going into embedded and pray I never have to touch a single piece of frontend technology again at this point

Emotion with Typescript has been a thing for a while and hasn't killed Tailwind, I don't think stylex will

Cool that they shared this technology with us, but to be really honest - Tailwind is better

I see a lot of similarities to vanilla-extract. I think the main advantage stylex has over vanilla-extract is that it is able to smartly merge styles. Secondly stylex has better colocation, where vanilla-extract requires a separate styles.css.ts file, stylex allows styles to created in the same file as your components if you wish. Lastly stylex will compile everything down to unique atomic classes as you use them for optimal bundle size where vanilla-abstract allows you to create unique multi rule classes where there may be a lot of overlap unless you opt into sprinkles. It really seems like a natural successor. From CSS Modules -> Vanilla Extract -> StyleX I think the biggest missed opportunity was there doesn’t seem to be a way to define styling inline - this will feel like a big step backwards for tailwind users. I look forward to play with it over the next couple weeks.

i'm a student. the more i learn the more i realize i know nothing. i've been using tailwind for a while but now i kinda want to go back to vanilla css, js, no framework, and carefully learn every bits of it.

Vanilla Extract has done all this for years; compiles to CSS, type-safe, and many DX improvements over styled-components

I think I would use it when creating a new design system with specific branding. but I think that the combination of tailwind + clsx + cva works great for that task too!

I am extremely happy to see that the majority of comments on this video are still in favor of tailwind or other solutions. StyleX really looks like a React "style" (pun intended) solution to a React problem. Vue and Svelte already make styling components super issue with the way how they are structured. Furthermore, stylex currently is limited to JavaScript frameworks, whereas tailwind is framework agnostic. I really hope that people won't blindly adopt StyleX just because it has the Meta name behind it.

I think they need to put more emphasis in the fact that is compiled, it's hard for people that had used CSS -in-JS to wrap their head around that

i'm just going to say that you can build a compiler on top of stylex and get an api like stitches/tailwind :) btw tailwind is not going to die, because there are developers who have not yet encountered the problems that stylex solves. i'm excited about stylex.

This doesnt come anywhere near the ergonomics of tailwind. Looking at the syntax for creating stylex classes looks exhausting. With tailwind you can just type utility class names quickly and easily and use vscode extensions to minimize the classnames from the code to keep it readable. The runtime cost forr css in js was one issue with those style systems, but not the only one. Long live tailwind.

Oh shoot it’s open now? Used to work at FB and did dogfooding and was one of the earlier consumers of styleX in 2020/2021 when developing internal tools and dashboards. Had a pretty decent experience with it My experience is a little dated on it, but my thoughts were that it is probably better for an established project that is standardizing over a new project

Theo can certainly sell a turd as gold..The guy has some serious sales talent!

This feels immediately like we will be trading a whole bunch of brain cycles every time you have to deal with it for some really specific use cases that it actually solves. I don't know, definitely gonna wait until it becomes battle tested outside FB.

I'm a self employed developer, so I don't think StyleX is something for me. But I like the co-location and everything is css aspect. I hope someday this library will also be interesting for smaller projects.

This approach was something I envisioned with styled components + tailwind, I will certainly give it a try

For me , am keeping with tailwind in the mean time

It seems nice for pairing a design system to a component library, as you mentioned. I might push to use this at my company. Another option is to use Chakra, the react package. It does pretty everything styleX does, and then some, and it’s built with A11Y in mind from the ground up. Chakra is my personal preference for style systems, I’ll be using that more than likely.

I mostly like the the T3 stack for quick development but the adoption of Tailwind has always been the one thing I’ve never understood. It’s inline styles using themed utility classes right? But it completely obscures the CSS industry standard, requiring new naming for everything and a lookup table to get anything done. I like inline styles using the styles prop in React because they are right there as you develop and read code, is fully customizable and easy to understand by anyone familiar with CSS. It’s even reusable if you want since it’s all just objects. Stylex appears to build on that concept adding support for some sudo class functionality too. IMO this is how I’d recommend small teams to work. For larger orgs wanting consistent styling I’d recommend a component library instead. It’s also worth noting that when both of these libraries lose popularity in 5-10 years, only the skills of one of these 2 tools will transfer over (unless css is gonna go by the wayside entirely which is very unlikely)

I still will be using Tailwind... maybe I'm limited, but couldn't see much value on this and it causes some Déjà vu of Styled Components. I remember the reasons many gave to leave Styled Components are exactly the ones that now sold as "good reasons to use it", so sounds we are coming back some years

I could see it working in bigger sites for sure! But for smaller sites or "indie" projects, I don't think this is the way.

Only real issue I'd have with StyleX is also one thing that they explicitly want to avoid that is powerful in CSS. Using selectors like for data-attributes (and in some cases, nested) instead of relying on some React state (i,e. client components) to set styles based on accessible attributes. I think selectors like :has are also useful, esp. with focus styling.

After using Tailwind for few years now, I ain't using any system where I have to come up with class names and write pure css. Tailwind makes me faster.

The current styling looks ugly to me. Personally, I prefer Tailwind or Bootstrap even more than this. Why should I choose to write justifyContent: "between" instead of justify-between or justify-content: "between" (plain CSS)?

the model and API seems really nice and I'll give it a shot, but I can't find anything in their docs around css custom properties (that I am personally very fond of using)

btw in your opinion, as junior should i learn styleX for my portfolio? in terms of getting more chance to land a job.. ? or should i focus to learn different css framework?

I would probably give this one a try, especially when they ship an intellisense too. There are two annoying patterns I always end up in Tailwind is that one is undescribed tags with lengthy classNames and the other is unnecessarily complicated reusable components that handles variants.

The X in StyleX, and the rivalry between Zuck and Musk - X, SpaceX

Although they mention colocation as a key concept, I'm pretty sure somebody will still try to put StyleX code in a seperate style.ts next to the component and import it

I ask my self what UIU Framework will be introduce stylex ? Lest see. I like it :)

Shoving the complexity into the build tooling is what makes JS so painful to use IMO. As soon as you have 3+ app dependencies that have custom build steps, configuring and debugging that setup becomes a real pain. The simplicity of Tailwind running it's own process is a huge part of what makes it so good. Configuration hell is real, and it's written in JS.

I think it would be the "go to" solution after a while. The simplicity and type definitions make it easy to start working with it. I never learned Tailwind CSS and now I think there is no point of doing it.

Number one thing i always hate about CSS-in-JS is when i'm debugging some html element in browser and i wan't what css class is applying specific property in the code i have search by propery for example "color:red" instead of ".red-button".

I ignore the hype!

But can it kill upcoming *panda*

Tamagui rivals this, and excels even at cross-platform (React Native and Web) if you want. There’s even talk of a Tamagui Tailwind feature that would make writing it as fast as Tailwind too.

would this be beneficial to organizations that have a custom component library and stick very closely to it? It sounds like no

So, correct me if I am wrong, but are we using tailwind to write a CSS-in-JS approach here ? If so, what's the point ?

What does it offer more compared to PandaCSS?

I’m confused, how is this so unique? What’s different about StyleX compared to panda css or vanilla extract?

This is built-in in Angular

What do you think about emotion?

They used to say that Tailwind is CSS with extra steps, but this thing actually seems like it is.

You know what, I like it!

Where would StyleX fit into your venn diagram of CSS solutions?

At a first glance, it seems pretty close to a statically compiled version of JSS.

I might be a noob but how is it different from style classes in react mui?

I am still happy with css module 😅

you know what I think of when reading their docs, react... this most likely solved the issues they have in their react projects but once again, this is not a universal tool that can be picked up on the go.

I don't see how this is any better than tailwind + cva/tailwind-variants. With cva or tailwind-variants you can separate the styling part and still co-locate. Regarding typesafity, having tailwind intellisens extenstion is sufficient. If this would have existed pre tailwind, I would likely have considered it tho.

Theo is too excited for for this ¯\_(ツ)_/¯

Cool new tool. Probably ot a tailwind “killer,” though. Both have their place… and I’m not even a user of either, including React. So, take that opinion with a grain of salt. I think the *theory* behind StyleX is great and works well with very large projects with a particular architecture, though. Particularly the shared/typed styles and its power to potentially reduce code size, increase sharing, and etc.

I think it's hilarious how the original design for CSS was to be cascading, and twenty years on the industry is STILL trying to undo the damage the cascading part has done to styling your websites

Is this sponsored video by Meta?? I am surprised Theo use this wrong clickbait title for this. Theo, wink your right eye twice if you think you are in danger

Tailwind still has Docs, inline styles, and better default themes. Stylex has better types and composition. Which will speed you up more? Tailwind for my cases but people will see the meta brand and gravitate to that.

tailwindcss is saving me from pondering about "what should i name this class" 😅

How is that different from emotioncss?

Theo loves hype.

How is this fundamentally different from vanilla extract?

I've started loving HTMX (HTMX mentioned, let's go) so I really don't see me dropping Tailwind for this any time soon 😂😂

If i wanted to write css id use modules, i like tailwind specially because i dont have to write css.

very similar to react native stylesheets, has better guarantees but I dont see it killing tailwind tbh.

I'll stick to tailwind, but I am glad runtime css-in-js is probably going to become a thing of the past

this is a lot like style sheet in react native

I think tailwindcss and styleX approach are two different things.

Styled components can make this better

it's impossible for this to kill tailwind imo

Yeah this is nice

While everyone is looking for best style preprocessor tool, I just wish CSS specs would be improved :-)

the concept same away like style in react native, right??

The only thing that’s gonna kill tailwind is tailwind

I don't see this even replacing bootstrap. 😂

How It's be a tailwind killer?

I've just given up at this point, the moment I learn and start liking something there's something new to released to replace it. I am sticking with Tailwind, its easy, intuitive and does not impact runtime performance. Nobody asked for stylex honestly

for medium sized project i think this is overkill

So... this is the Panda CSS from Meta? 🤔

Good thumbnail 😂

this is the react dev team in a nutshell "There are benefits of DRY code, but we don't think"

why meta like to write css in js

I have still the same issue with styleX what with other css-in-js solutions. When will be styleX interesting and useful...when we push some responsibilities of css into js because we are not familiar with css or scss. After creating 2 design systems with many variants...I recommend to learn css instead of creating more js code....which is technically the same number of code and normally should be autotested as well.... Definitely a competitor for tailwindcss or for other frameworks, but I'm sure that it won't replace those. It is just another solution with a small fix, that styleX will be compiled. Which solves css-in-js main issue which is also a lazy solution instead of learning css/scss. But it is always funny how high hype can be still around another css-in-js solution 😅

Maybe I am really dumb, but I don't see how this would be better than TailwindCSS. Seems like it's more complicated with no real added benefit, and intresting just because it's different.

Doesn’t MUI have the same thing for years with their createStyles function?

Still using Flow is a little stubborn at this point. Also, is this for only React? If so, it sucks

Where’s the Vite support?

Frontend is like watching a circus!!! bedlam

UnoCSS 💪

No Tailwind killer here, just vanilla-extract variation.

yeah lets add more visual crap inside the component view totally sounds like a good idea... I would never use this it looks terrible compared to using inlines even tailwind seems messy visually to me I much prefer a seperate stylesheet you just reference a class name and thats it like... when would I ever use something like this over tailwind for doing inline styles

Sold just for having only two functions to learn create and props 👍

why do we need type safe for the CSS?

I feel Tailwind is much much easier for a beginner, The documentation is laid out smoothly to understand and copy paste code is like drag and drop lol but it's that simple designing a button is fun on that note I use tailwind and don't feel a gravitation to Stylex...

Everything about StyleX feels like CSS-in-JS, except that CSS is generated on build rather than using JS on the client to do it. Even leaving the question of performance, I never liked the syntax and the style of theming in this way. Still bullish on CSS modules and utility classes. Bullish on using actual, native CSS, rather than these types of abstraction layers. I think this would replace current CSS-in-JS solutions, not compete with Tailwind and similar libraries.

More javascript... just what the world needs.

I just see another CSS in JS libray

There is no way I'm using this

Threads 2.0

It is similar to the old MUI's v4 withStyles, rather use the new one with styled-components or emotion... In my opinion it isn't a Tailwind competitor, much less a killer...