The Truth About Facebook's "Tailwind Killer"

okay so style X is finally out it's open source it's made by Facebook and Powers some of the most popular websites on the internet like Facebook or Instagram or even WhatsApp some people call sty X the Tailwind killer or the end of tailwind and one thing I really appreciate about style X is that it doesn't try to be either of those as a common pattern in this video you'll recognize that style X is not meant at all as a replacement for Tailwind it has its very own ideas of how to properly Style apps how to scale Your Design system that has nothing to do with Tailwind now there are things that are better than Tailwind in style X Out of the Box we're going to get to that in a bit and there's also all the other stuff where it doesn't try to be like Tailwind at all mainly the way you write style X let's use react as an example even though it's totally framework agnostic you basically just Define your component you define your Styles above that component like some Basse Styles we're going to use for layouting with a flex property and whatnot and a highlighted state that gives us a certain color for or text we can then simply spread in in the style x. props all the styles that we want to apply to this certain div element and that's a super important benefit over something like style components where every component then looks like a custom component even though it's really not in style X we only apply these Styles in OJs X the actual HTML elements remain the same which in my opinion makes the jsx much more readable compared to styled components which we use at work I don't like it now enough Theory let's see what we actually just created on our web page and just like that right up here our blue text shows up in our own kind of style system if you want to call it that and exactly that is one thing I don't really enjoy about style X you see if we look at something like the Tailwind colors that Tailwind provides to us there's a whole design system baked into Tailwind CSS were beautiful colors that I use in designs that are not related to Tailwind at all just because these look so good out of the Box are provided to us in CSS or stylex because it is just a light abstraction on top of CSS that is not the case and you're supposed to build your completely own design system yourself but that's not the full story there's also things about Styx that I enjoy more because they're more intuitive than in Tailwind let's say for example we had an alternative highlighted version of our text where the font size is the exact same let's leave it as 16 but the color let's say for example is going to be red because this works in regular CSS this will also work in style X and just like that let's merge this class name let's also apply the styles do alternative highlighted to our little P tag in here and that works syntactically by just separating these with a comma this is super straight forward and just like that we can see the text turned red because we set it red and the alternative highlighted this is super important this does not work in Tailwind for example the alternative highlighted here the color red overwrites the color blue because it was defined later we first apply the color blue and then we apply the color red in the alternative highlighted if we take a look at this same implementation in regular Tailwind we first apply a text uh blue 500 and then a text red 500 something really interesting is going to happen of course we're going to get a little you know linting complaint right here but what you expect is for this text to be red because red comes after the blue and after all CSS is cascading this works just fine but if we take the text red 500 and put it before the text blue 500 now it should be the other way around or text would be blue however if we save this exactly nothing changes and that is because the CSS file that is generated under the hood for us by Tailwind you actually have no control over and just this CSS file actually determines which color or text will be in the end and since we have nool control over it we need an alternative solution because merging like this in Tailwind does not work out of the box whereas in style X it works exactly as we would expect where we first Define any style and then can overwrite that at any point later on just by separating these with a comma let's get rid of all that and take a look at something called variants because also in sty X these are way more intuitive now variants are a super common CSS pattern that we can use where we create a default style that will always be applied for example we always want this text to be white that's why it's the default style up here then the blue variant will give it a background color of blue and the red variant of course will give it a red background color Now using this variant could not be easier with Styx whereas with Tailwind we would need an alternative solution once again just like for the merging in style X we can simply spread in the style x. props and now we're going to do two things first off we're always going to apply the variance. default for the default style which is a white color if we save that it shows up right here beautiful and now we can simply merge that with the variant that we want to use which can be also Dynamic for example the variants. blue if we want that which is going to give it a blue background color or the red variant if you want that of course you can pass this in as a prop you can save this as state whatever you want this is totally up to you the point is the way in which we determine variant is super intuitive in style X whereas in Tailwind there are things like third- party libraries which can use for this is that a deal breaker no I still like Tailwind a lot in fact but is it more complicated and less intuitive than by default in style X I think it is with style X your HTML largely Remains the Same just the styles are abstracted way above the component and tightly collocated and scoped to that component which I really like the reason I'll lik this stay with Tailwind anyways is the great defaults it has like the font sizes or the border radiuses and whatnot they look great out of the box you don't have so many options to choose from whereas in plan CSS or style X again just a pretty light abstraction I would say on top of regular CSS you are on your own you know figure out what looks good you can build your own design system and Achieve that super consistent look across those projects that is by the way the main reason they decided against a config file so you can easily Port it over to other apps and always achieve the exact same style which I really appreciate so again it's not meant as a replacement for Tailwind it never was it's a totally own design approach and I think that's awesome let me know what you think about it CSS injs I know is a controversial topic not everybody likes it I use style components at work I don't like that either but maybe style X is different let me know what you think I'm going to see you in the next video have a good one and bye-bye

Channel: Josh tried coding

Views: 41,182

Keywords: stylex, stylexjs, tailwind, css, meta css, meta stylex, josh tried coding, joshtriedcoding

Id: vpAXHtPK8nA

Length: 6min 48sec (408 seconds)

Published: Sun Dec 17 2023