The Truth About Facebook's "Tailwind Killer"

After trying StyleX for a couple of days, here's my take on it. Pretty late to the party, I know, it's great to get a feel for your guys' opinion beforehand too. What are your thoughts, is this an option for your next project?
Maybe the best tech newsletter???: www.joshtriedcoding.com/
-- my links
Discord: / discord
GitHub: github.com/joschan21

[@joshtriedcoding]

Happy holiday season everyone!!! Hope you have a great time with your families

[@naushadhaq2859]

Same to you josh, happy holiday and love from Nepal

[@gofudgeyourselves9024]

We don't have holidays in India

[@Stoney_Eagle]

I ditched material ui for tailwind, I will probably never use stylex. I am tired of creating whole object structures for styles and tailwind has a class merge library I can use.

[@lulungsatrioprayuda9931]

with my soul yeah ofc im totally agree your opinion mate

[@leonardoparisi8263]

I totally agree too

[@supermamoru]

I even ditched CSS for Tailwind

[@Metruzanca]

Same. I also prefer that tailwind is framework agnostic, meanwhile stylex is yet another emotion-like library built for react. I'm kinda done with react on personal projects and wish I could stop using it at work (solidjs ftw!), so I'd like my main styling tool to be framework agnostic.

[@jeromealtariba7339]

got same sensation, that styleX is similar to MaterialUI in styling. Seems therefore useless. But might be wrong

[@khaledsanny4817]

I will never go back to "thinking hard" about naming classes

[@mostafarezaie-yt]

Same here

[@iamghezali]

in my opinion, after trying tailwind, this was the real reason i didn't go back to regular css or styled components. naming classes when you have a complex html structure is pain in the asssss, you try to find class name for something that doesn't have any logic.. i apply variants using data attributes as selectors, i don't do merging, the claass string is complicated but i think this would be solved not by a library but instead with editors tools, like some extension to group separately the breakpoint classes and the data attribute selectors ... i reallly want to work on an extension to do that

[@Anas_Alaqeel]

I dont know why everyone complaining about naming, its the most easiest thing ever, you dont even need to think, just write it as a description for the element. If you cant do the easiest thing in programming, how you will even will become a programmer!

[@iamghezali]

@@Anas_Alaqeelit can get complicated when you don't want to do scoping and it brings cascading issues

[@mostafarezaie-yt]

@@iamghezali really?

[@mertdr]

I really don’t know why some youtubers (surprisingly Theo as well) are so excited to adopt new libraries and “kill” stable ones. StyleX is pretty much the same with RN’s Stylesheet module and CSS IN JS modules of other js libraries. Anyways, thanks for your input and nice explanation, happy holidays mate! Edit: apparently stylex has a few useful stuff under its sleeve like dropping unused classes at build time or spreading style.create with predefined classes. In other words, it would be unfair to say that it brings nothing new to the table. But still jumping back and forth between the html element and styling (in same or different file) is the last thing I want to do after Tailwind’s magic.

[@Nab_001]

exactly, it may seem okey ,everyone has an opinion but believe me newbies after learning basic HTML CSS and JS will have a nightmare to choose their next step, Thousands of Libraries/Frameworks for JS and for CSS, Even for HTML leading to Giving up learning. and the cause of this nightmare are some youtubers that we take as a reference. *Guys We Don't Need Any New Technologies And Syntaxes, We Need Implementing Solutions To Already Existing Open Source Technologies.*

[@pheisar]

YT content creators make videos about anything related to their channel theme/topic. They are not 'adopting' anything. They just creating content to make money.

[@fancybaguette]

They make their titles provocative so more people click on the video

[@mertdr]

@@Nab_001 honestly I wouldn’t want to be a newbie nowadays. First I read an article or watch a video claims that there will be no programming jobs in 5 years due to AI (fat chance), then I watch a video says “hey! It’s time to replace your favorite tool which was released just a few months ago with a new one!”. Not surprising if beginners are having a hard time.

[@joshtriedcoding]

I believe one great approach StyleX takes is creating a css file instead of injecting at runtime like emotion does. For me, tailwind feels more natural to use too, though it's awesome to see other approaches to solve essentially the same problem. Cheers man!

[@TomNook.]

This is why I value you over certain more popular influencers... you show, not tell. If you've got an opinion, prove it with the code. Others rarely do this.

[@user-dx4ux5um5w]

I think Tailwindcss is still the 👑. In my opinion StyleX is just similar to styled component🤔

[@_jb5261]

StyleX reminds me of the ReactCss package. I don’t see stylex being needed for most use cases other than in large projects/orgs where a custom design system is needed. Probably won’t ever use it other than to test it out, but it seems pretty cool though pretty cool though

[@Luxcium]

These videos are just too much awesome 🎉and I try not to post too many comments but I just am unable not to be amazed by the quality of this young KZbinr because of his communication skills… I hope you guys all will agree with me that Josh is underrated and that he will soon become one of the most influential people on KZbin I have a lot of respect for many KZbinrs but Josh your energy is very appreciated and your way of being straightforward and direct is what I love the most but not only 😅😅😅❤

[@_ingadi]

Maybe it just being regular CSS means you can throw in something like Open Props by Adam Argyle to provide good looking defaults. It has text, gradients, shadows e.t.c. implemented as CSS props.

[@huydh]

Very informative, ty Josh!

[@zcehtro]

I find it so hard to believe that so many KZbinrs covering StyleX are treating it like revolutionary new technology and reviewing it like something new and completely ignoring that the technology actually came from react native, also by Facebook.

[@AbrahaMiles]

There is a css selector called data-* , the * means you can call it as you want in html and pass everything to it. You can then use css to select this case and apply specific style without having to create a class. I feel css in js libraries try to solve an issue that does not exist

[@otto3225]

Well said!

[@markojozic3944]

I work with JS, CSS, HTML and other languages for over 15 years now and I think since react less and less devs actually understand CSS

[@bryandieber4871]

sometimes It's doesn't matter if devs understand css

[@chrisr2063]

I disagree. I spent alot of time converting vanilla to tailwind/bootstrap and it greatly increased my understanding and element usage

[@ORiastanjung]

Hi Josh, i want to ask something, when we use ISR in nextjs and set the revalidate like 60 seconds, if I create data in database, then I go to for example user page by id, even though the revalidate not touching the 60 seconds can i read the new user from the database? or it should like wait for 60 sec to get the data from db to the build page? need some explanation please

[@FirstnameLastname-cl4op]

When i adopted the tailwind css it significantly reduced the time i spent on designing, it's the major reson for me to use the tailwind, now i can deliver projects faster

[@frazuppi4897]

okay so in practices they have css classes but defined in js with all the benifits with that but that gets compiled into css so no slowdown - great!

[@marvinkr]

I don't get it , we already have cn, tailwind-merge & cva for that? Not sure about the use case for Style X.

[@zebedie2]

For tailwind there's tailwind merge and tailwind cva for that sort of thing, stylex seems a lot like vanilla-extract / pandacss with vanilla-extract one downside is that the styles need to be in they're own seperate code file, with pandacss creating libraries using it can be a bit compliated due to the way it generates the css.

[@thomasspornraft2612]

I care more about what colors, fonts, spacing, margins, and borders I use than how I apply them. Most approaches are fine for me and i will give stylex a try, but I prefer Tailwind atm because of its headless approach and similarity to plain CSS.

[@unforgettable31]

Something I don't understand is what's special about this library when react already has style that has like the same syntax?

[@jameskayihura1675]

Hey I don't agree with you about the highlighted text color example at 3:36. Why would someone try to apply two different colprs on the same html element? It doesn't make any sense, that's why in my humble opinion TailwindCss displays a lint error.

[@keremgurbuz3210]

Hey bro, have you heard the clsx or twMerge ?

[@waleedsharif618]

How would conditional styling work with this new stylex ?

stylex.props(someCondition ? styles.theStyleYouWantToApply : null) This, along with "last applied styles always wins" makes this such a fantastic predictable library to write scalable css with and a lot of people seem to be sleeping on it. If you've ever tried to make conditional styles, or overwriting styles using something like panda or tailwind, you'll know how painful that gets real quick.

[@NamanGoel34]

condition && style

[@Marhaenism1930]

stylex.props(isActive ? style.active : style.inactive)

[@linshen4658]

StyleX also mitigates the name mapping between classname and final css rules.

[@joshtriedcoding]

true!

[@Z3roC001-id4zr]

This is Absolutely not for small-mid/solo projects at all. More typing demands can tire your fingers and brain. The advantage of TailwindCSS is that it is straightforward, requiring less typing, so it's less tiring on the brain.

[@magicfibre]

Doesn't this look exactly like Material UI 4 + clsx?

[@xrexy]

The "alternative_highlited" example could also be done with Tailwind with class-variance-authority(cva). It's actually what some ui libraries like ShadCN use for their variants!

[@riyaadhabrahams]

Agreed. I was immediately thinking just do cn("text-red-500", "text-blue-500")

[@rand0mtv660]

@@riyaadhabrahams your example assumes cn() function does Tailwind class merging using tailwind-merge. Someone reading this might think that this will just work because text-blue-500 is after text-red-500, but that's not how CSS works unfortunately. My point is, this is not an out of the box experience with Tailwind and requires additional setup. I don't consider it complicated, but just wanted to mention it for anyone reading.

[@weeb3277]

5:00 in your example you made it seem like the default is white, while it's variant is blue or red. of course the default is text color, while variants are background colors. so in your example the default is actually background color "none" and not white. what an odd example. not sure if this is what you were going for.

[@anlukinha8764]

How do you render your code animations? They are pretty good!

[@anlukinha8764]

Wait a sec... Is that powerpoint morph transition!?

[@joshtriedcoding]

@@anlukinha8764 almost, it's keynote!

[@anlukinha8764]

@@joshtriedcoding thx, always following ur content. Greetings from Brazil o/

[@yytffs]

Stylex looks like a big ass javascript css object. Why should I use it? Why can’t I just use plain object?

[@rutvikjr8251]

I think we can build amazingly by using both tailwind and stylex in one project.

[@omar.alhendi]

How is Style X different from Mantine's V6 way of styling ?

[@Zephury]

stylex compiles it all down to regular css. it looks and feels like css-in-js, without any of the downfalls that css-in-js came with. stylex is actually quite a big game changer, people just dont like new things. it looks and feels familiar, which is a good thing in my opinion. It also compiles the css in an intelligent manner, resulting in small, performant css bundles

[@otto3225]

Imho to just wright CSS is the best solution for 90 % of my projects. To make it more complicated just makes it more complicated. Tailwind reminds me of times where we used font tags and later inline styles ...

[@andrewtfluck]

This isnt even the first time this was done. Very similar library called treat does this very similarly

[@nattawodsatee4068]

I use tailwind variants and pretty much doing the same

[@ZainRamzan-pt8cm]

Stylex is same as Stylesheet in RN and it has to do nothing with tailwind css

[@HikaruAkitsuki]

Is that how Emotion CSS works?

[@tannercottle4206]

Sooo... React Native Stylesheet?

[@yajirushik2871]

I don't get it. It looks like a styled-components, I personally love that styling but learned Tailwind and it's much more easier without overcomplicating things IMHO it's the best solution for writing clean components / web components. What's the point of rewind?

[@Anas_Alaqeel]

Some day everyone will back to use normal css file

[@krishnachaitanya5905]

Supperrrr

[@RohitKumar-xs3wh]

Tailwind is not going anywhere, will still use it every time, its pure joy and power, my UI's are great since i started using tailwind.

[@ITentrepreneur]

Will we see StyleX in your next X-clone projects?!

[@shinigami7364]

The overriding ability will let more unused Css to be there in the app. This is why I loved Tailwind as it highlights duplicacy and reduces the amount of unused Css.

[@DeveloperLeon]

I'm pretty sure that StyleX drops the unused stuff from the final css output. At least their Docs suggest this is the case.

[@codegamer69]

looks similar to react native styles on the first look.

[@michaeledison1974]

3:33 what is the point of adding 2 text colours (text-blue-400 and text-red-400) to one HTML element?

[@DevZoom7]

when you have a custom component that has some default tailwind classes and that component can accept more classes as a prop, this will may cause to have 2 classes of the same thing (color for example) I'm not a tailwind_css user, correct me if I'm wrong : -- )

[@deronek]

@@DevZoom7 This is what "cn" utility function and "tailwind-merge" library is used for in defining components. You can easily create a component which defines all of its default styling, but when additional classes are passed by props, they are always overriding the default ones if any conflicts arise.

[@hhhhhhhhhhhhhhhhhhhhhh]

@@deronek But that is not a native feature of Tailwind. Yes, you can fix it with tailwind-merge, but that is another library you need to install to get the same functionality that StyleX has. Definitely not a deal breaker, but that's the point that is trying to be raised.

[@deronek]

@@hhhhhhhhhhhhhhhhhhhhhh yes, valid point that it's not included in Tailwind and needs to be added in 3rd party code while being crucial to usability of Tailwind

[@_ivanoleksiuk]

styleX is completely different to styled-components because former is not loaded at runtime as the latter does

[@tuananhdo1870]

But the developer experience is the same. Tailwind is the best dx

[@SamHartmannCom]

0:55 Cool, so we basically bring HTML into jsx?! 👎👎

[@brunoguerra7160]

talks about PandaCSS!

[@yaznbook1]

cool

[@user-yk6mm2bb4c]

seems like react native styling brought to the web

[@mabdurrafeyahmed9256]

this method looks like react native stylesheet

[@traam_889]

true, like they are just playing around at this point. they make new stuff just for the sake of making stuff

[@404nnotfoundd]

i think tailwind is much readable

[@whatisnextthen9836]

this is similar to how react native styles work

[@portalpacific4500]

I dont get how its any better than using traditional classes and raw css lmfao. Im so confused.

[@dawitminale2775]

Big shoutout for your awesome skills! 🚀 Your work is seriously top-notch, and I'm loving every bit of it. 🌟 could you make us a video on a project with next js + express js in ts?

[@neerosity]

better to use CSS3, tailwindcss is used so that we don't have to define classes from scratch, no meaning of using it to make code more complex.

[@blueprint7000]

React native styling but in web .. Insteresting

[@ScriptCodec]

Finally the world is going on X direction 😂😂

[@mqh20]

Tailwind works fine so no reason for me to go for styleX

[@GhostTheDeveloper_]

Hell no 😂, wayyyyyyy to complicated tailwind css will always be the win for me

[@danguiismaelkone08]

it's like RN ? i think

[@be2wa]

Kyle's clickbaity thumbnail made a perfect opportunity for a revenge, didn't it ;)

[@SamuelKarani]

Why I am only seeing KZbinrs excited by style x? Are they just excited to teach a new course? Who is actually interested interested in going back to styles in js?

[@baudysdev]

I like tailwind way more :D

[@yowremco]

Let's be honest. Litterly no one who works at a big company that provide some sort of SaaS is going to migrate from styled components or some other solution to StyleX. Heck even stuff like Tailwind is really not used a lot in such corp projects. Some side project sure.

[@onlyvisage]

TailwindCSS on Top for ever

[@user-fe1wb7qv6x]

I will probably never use stylex. I am tired of creating whole object structures for styles and tailwind has a class merge library I can use.

[@pascal5016]

Can you make a KZbin clone?

[@awaisraza2285]

No way near to kill tailwind. I am not gonna make whole big object of styles and put it in elements. It will make the component uglier and i don't want ugly code. Tailwind is super cool ND with shadcn-ui it has become a giant and go to css framework for developers.

Uglier? You mean uglier than the bootstrap like class-puking that is tailwind? Yeah no. Now looking at tailwind might be a trade off some people are willing to make, but if I'm gonna stare at code for 80+hrs a week it's gonna be good looking, like css-in-js is.

[@RhythmRift74]

styleX is just styled component

[@hirwaaldo529]

I think Stylex will not replace Tailwind because Tailwind is easier to use than Stylex 💯.

[@JlNGLEZ]

You didnt mention the primary benefit onlf styleX, its compile time based, meaning it will output only the styles needed, unlike styled components like emotion, i also dont understand how you think spreading props into jsx is more readable then named compoennts, you literally end up repeating a lot of logic just to apply styles, i also cant stand writing css in object notation, it wont convert me from emotion just yet 😂

[@alexandrucomanescu9857]

Having to remember class names is what I dislike about Tailwind/Bootstrap/etc. Building customizable UI libraries is impossible with Tailwind if you don’t use ShadCN logic.

[@michael.knight]

Tailwind uses classnames that map almost 1:1 (not perfectly of course) to CSS properties, so you don't really have to learn anything new as is the case with something like Bootstrap.

[@alexandrucomanescu9857]

@@michael.knight It still doesn’t solve the library issue, which is extremely important.

[@joshtriedcoding]

fair enough, one huge benefit is that while you do have to remember classes, you don't have to name them yourself

[@syth-1]

I think it's an issue of exposure, everything is a Google search away, as long as you know what you want, but the equivalent in tailwind. The more you use it, the more you get better at it, the easier it becomes and less you rely on searching for the tailwind equivalent, Atleast that has been my experience,

[@tuananhdo1870]

Yous memory s bad

[@erickmoya1401]

Pure css over whatever is not really better or different. Tailwind is different. Like it or not. StyleX is just complexity for the sake of it.

[@codelibz4748]

Threads 2.0

[@Elanowebdes]

I style prefer Sass :/ I hate Tailwind... but at least it looks less bad than Tailwind so that's a +

[@derciojds]

Tailwind sucks, anybody defending it has skill issues.

[@rozrewolwerowanyrewolwer391]

Imo styled-components is more readable. Btw. 1:15 this code doesn't make any sense and is bugged. You cannot pass boolean as prop to styled component. I see stylex as worse younger brother of styled-components

[@mulfyx]

u can

[@rozrewolwerowanyrewolwer391]

@@mulfyx yhym. Did you test it? You will get console error.

[@mulfyx]

@@rozrewolwerowanyrewolwer391 check example on main page bro 💀

[@iury664]

i were not able to do a flag of my country kkkkk dammit

[@localusercamp]

twMerge leaves the chat

[@juanjosecruzortiz111]

I honestly think that people in general should stop using Facebook's shit like react or this piece of garbage.

[@ricardocnn]

Tailwind was a game changer, styleX is just another css in js. Nothing new.

[@abdullah_mufti]

stylex is not a good alternative it is just like bringing threads app to replace twitter,

[@traam_889]

dude, for real how is it different from me defining a const styles = { // CSS styles here //} and just spreading the styles.key in the style prop of the element, we don't need more front-end libraries in my opinion tbh

[@joan.paucar]

Idk man, stylex is useless when exists something like shadcn

[@krishnabhandari007]

Tailwind css is the best

[@IlllIlIlllIIIllIl]

tailwind out

[@unathorizedbargain8862]

there wont be a tailwind killer for a while

[@anushkasharma3736]

Man its boring stuff that you apply styles like react native stylesheet. I will not gonna use stylex I love tailwind

[@pete531]

I dont like it, why re-invent the wheel

[@alexanderleschanz9991]

second! I love your vids btw

[@pavlovalor]

Tailwind is a piece of shit. I reject applicants if they use tailwind or anything else than raw css or sass.

[@backupmemories897]

as tailwind user this is meh xD

[@ridass.7137]

where this overriding-inline-classes thing came from? It never was like this in HTML, stop creating fake naratives

[@TheNextDoor.]

D.O.A (Dead On Arrival)

[@WingStopUS]

Definitely not a tailwind killer imo

[@greenshaheen6716]

sorry to say styleX is the worst invention of 2023

[@imadlatch7206]

Tailwind killer ? not even close mate it is a lot complicated. you are talking about React css framework not css framework

[@mcha_yt]

Tailwindcss> stylex

[@gpenner]

I watched just to support the channel, don’t like StyleX and won’t be using it. Tailwind and Nativewind all the way here