00:00my first impressions of panda CSS this
00:02is an article written by Baptist that
00:04I'm actually pretty excited to check out
00:06I've been meaning to take a deeper look
00:08at Panda have been hearing really good
00:10things Panda's from the Shakra team and
00:12I'm personally not the biggest fan of
00:14Shakra didn't love Shakra cuz it was
00:16really component library is Panda seems
00:17to be focused on being a more minimal
00:19building block so I'm excited to see how
00:21it works and what people do with it so
00:22let's take a look at this comparison of
00:24tailand and Panda comparison of styling
00:26solutions for the web covering type
00:27safety merging Styles and component VAR
00:30interesting because these are all things
00:31T doesn't really do good
00:34opening hey there it's the first issue
00:36of my newsletter for 2024 once again
00:38shout out to the author we'll be sure to
00:39embed his Twitter and stuff somewhere
00:41I've been using Panda CSS for a few
00:42weeks now to build the website and the
00:43demos of xstate by example and I've got
00:46a lot of feelings I want to share with
00:47my fellow web devs Tailwind CSS brought
00:49a lot to the table for a bit of History
00:50Tailwind was my go-to styling solution
00:52for nearly 5 years and no styling
00:54solution has seduced me until recently
00:56tailin is excellent for a few reasons
00:58first styles are edited within the mark
00:59markup instead of being separated second
01:01final styles are predictable and it's
01:03easy to prototype third it comes with an
01:05excellent quality default theme un let
01:07developers focus on what matters instead
01:09of choosing between a font size of 14 or
01:1115 it's not really a theme I have a
01:13whole video about that it's Primitives
01:15you build with not like when I think of
01:17a theme I think of a way a button looks
01:19not a set of Border sizes to each their
01:21own not really themed but I get it point
01:23three managing a website built with
01:25Tailwind is more manageable because many
01:27problems are discarded such as finding a
01:29good name for this CSS class or dealing
01:31with specificity in cascading problems
01:32absolutely agree maintaining Styles was
01:34a thing I used to spend a lot of time on
01:36that I spend almost none with Tailwind
01:38it's way quicker to fix things find
01:39things change things build things just
01:41Tailwind makes CSS get out of your way
01:43and then point five Tailwind generates
01:45Atomic classes keeping the bundle size
01:47tiny it generates the same class once no
01:49matter how often it's used again I don't
01:52think we will appreciate this point
01:53enough it's very very hard to make a
01:55styling solution that is more performant
01:57and efficient than Tailwind because
01:59you're reusing these class names all
02:01across your code base and you're
02:02generating that one CSS file for your
02:04entire website you load one pretty small
02:06CSS file and then all of your CSS is
02:08handled and since there's repetitive
02:10Parts in your markup you can Gip that
02:11really well too the performance of
02:12tailwind and its impact on both the size
02:14of your markup in HTML as well as the
02:16size of your CSS is actually really
02:19really good anyways of course Nan's here
02:21for those who don't know Nan is the
02:23creator of Styx panda is a maximalist
02:26stylex it has some good ideas and yes is
02:28me maintainer of Styx figured as much in
02:30the mind good to see you interesting
02:32that you have positive things to say I'm
02:33extra curious now he also called out
02:35that once you use Tailwind merge a lot
02:37of the performance wins from Tailwind
02:39start to crumble yeah fair you have a
02:42point anyways I bought Tailwind UI the
02:45paid templates built by the T and CSS
02:47team and I use it for my clients and my
02:48side projects without exaggerating it's
02:50one of the best purchases I've made the
02:52return on estimate is high for the price
02:53at costs I agree I am going to confess
02:56something here's the upload thing
02:57homepage there you go look
03:04familiar hope made my point tail and DUI
03:06was a very very good purchase for us it
03:09has got us really far most of our
03:11designs been complimented more than
03:12anything and did some customization I
03:14will say the code for this was awful and
03:17the placing of these blobs expected the
03:19homepage to always be perfectly vertical
03:21so I did actually change a lot of the
03:23code but the design thank you Tailwind I
03:25appreciate y'all you make a good deal
03:27anyways I learned much about CSS in
03:29designing user interfaces thanks to
03:31Tailwind also hard hard agree I had
03:34plateaued in my CSS knowledge pretty
03:36hard and just tried to to get out of CSS
03:38whenever I could and focus on the things
03:39I was more excited about Tailwind made
03:41CSS so much easier as the wrong word fun
03:44to engage with by by trimming out all
03:46the annoying parts and focusing on The
03:47Styling part it made CSS so much more
03:49fun for me and that that feeling of what
03:51I call like the Zen where you're just
03:53typing the specific class names that you
03:54know are needed for the thing you hit
03:56save they sort themselves correctly and
03:58it works so good the reason is that the
04:00default preset gives excellent tools to
04:02non-designer people yep again we don't
04:04have a designer at ping right now and
04:05we're getting away with it the sole job
04:07of finding colors that look good
04:08together is difficult also one My
04:10Favorite Things even when I'm not using
04:11Tailwind I'll pull up the color dock
04:13because their color palette is so good
04:15the ease of prototyping and the
04:16Fantastic documentation quality can
04:20well so here's where we get into type
04:22safety type safe csjs with build time
04:24generated styles that sounds familiar
04:27that sounds quite a bit like a few
04:28things we talked about on the Stream
04:29started hearing about panda on Twitter
04:31less than a year ago let's see they
04:33actually follow me good you've
04:34earned a follow back Alexander is one of
04:36the core contributors to Panda he was
04:38advocating for it on Twitter I only dug
04:39deeper recently when I asked myself what
04:42would I use to style my new project xate
04:44by example you know if it already has an
04:45X why not style X Panda CSS is a CSS njs
04:48solution that extracts the Styles at
04:50build time instead of runtime resulting
04:52in better performance it looks like this
04:57oh I'm not going to like
05:00this I'm not going to like this at
05:03all one of my least favorite things
05:06anyone ever did to Tailwind was this
05:08awful thing called attribut Toy Mode it
05:11was usually a config for Tailwind
05:13Alternatives that were usually CSS and
05:15JS things like windy or I believe
05:17there's a mode for this for um Uno also
05:20has an attribute to fight mode if I
05:21recall I hate this it it entirely
05:24destroys the thing I was just describing
05:25with Tailwind about the Zen mode because
05:27now I have to press enter now I have to
05:28remember which key is which now when I'm
05:30like reading through I remember which
05:32part I'm on like is this BG or is this
05:33border you don't have any guarantee of
05:35order because it could be top bottom
05:37left right anything I hate this I agree
05:40that having a better context when you're
05:42reading through your classes is nice and
05:44knowing where things are is important
05:46but that's why the Tailwind prettier
05:48plugin that auto sorts the classes is so
05:50good because they're always the same
05:51order so you don't have to worry about
05:52it I think the problem this is trying to
05:54solve is solved way better with the
05:55automatic ordering and this is just
05:57causing more problems not solving them
05:59like just the number two in a
06:03ah okay anyways back to this because I I
06:07don't want to let my previous hatred of
06:09these Solutions cloud my ability to
06:11judge Panda fairly so Panda extracts
06:13things at build time instead of runtime
06:15similar to vanilla similar to stylex and
06:17it generates markup that is literally
06:19just Tailwind this is really funny it it
06:21writes the Tailwind for you by making
06:22you press the enter keymore okay I'll
06:24stop I promise I'm sorry the fact that
06:26you have to press 15 symbols for
06:28everything you want want to do I I can't
06:30stop I have to keep going I'm sorry the
06:32we all agree that pressing underscore
06:34pressing colon pressing quote pressing
06:37comma pressing enter pressing all these
06:39things is worse than pressing any of the
06:42keys near the middle of your keyboard or
06:44spacebar right like we all agree with
06:46that because the amount I have to
06:47maneuver around the keyboard to apply a
06:50background color a border and a font
06:52size is absurd that it's just the amount
06:55of typing I have to do is so much worse
06:59that it drives me insane okay I saw an
07:01actually really good question if it
07:02compiles why not make it a single unique
07:04class name because doing that is
07:06incredibly inefficient this is why most
07:07of the compiled Solutions suck because
07:09most of the compiled Solutions make a
07:11very specific assumption that everything
07:13needs to be unique because these are
07:16compiled as individual things for each
07:17field You' filled out now if you have
07:19let's say I don't know 14 places that
07:22use font size 2 XEL you don't have to
07:24include one additional line in 14 unique
07:27classes instead you have all 14 of those
07:30things have the font size 2 XEL class it
07:32lets your CSS be way smaller because you
07:35have a much much smaller number of
07:37classes and you will eventually hit
07:38performance issues just by having a
07:40certain number of classes that your
07:41browser has to deal with and on top of
07:43that your markup will be better too I
07:45know that sounds unintuitive because
07:46it's like wait aren't you just putting a
07:48bunch of small class names in the markup
07:50well yeah theoretically the markup could
07:51be a little better more often than not
07:53those class names get long tedious and
07:54are very unique whereas when you have a
07:57set of classes that are reused cross
07:59your code base that are always in the
08:01same order those can be gzipped to be
08:03really small so as much as that unique
08:05class might sound better actually makes
08:07compression worse in a lot of cases yeah
08:09this is going to drive me insane let's
08:10let's keep going I I I want to approach
08:12this as chill as I can I want to try and
08:15appreciate what they're doing here I
08:17just don't like the amount of work I see
08:20when I look at this anyways you can
08:22group styles by conditions large for
08:24large breakpoint or by property wait or
08:27you're winning me over
08:30looking back at this I think we got a
08:32little blinded by my by my hatred of ATT
08:35tribut toy because large here makes us
08:38very different I will say it is Panda's
08:40fault for me falling for that because
08:43one of these is a sub group of targets
08:46so in this case we want the background
08:48color to be base 50 Gray on Hover to get
08:51darker this is a subsection of different
08:54style things I would want to apply if
08:56you are a Tailwind user this is the
08:58thing you'd put for the first two two
08:59characters at the start of your Tailwind
09:00call this is a viewport selector these
09:03are two very different things and having
09:06them next to each other like this makes
09:08it very easy to skim over and not
09:10realize that this is an entirely
09:12different Behavior than what this is
09:14that's a bit scary to me I was actually
09:16thinking the code review here might be
09:18better what I'm seeing here feels worse
09:20I'm stealing your quote Angelo without
09:22crediting you cuz I can't get the words
09:23right these are properties these are
09:25media queries they shouldn't be the same
09:27index level you can convince me in tail
09:29that media query selectors aren't great
09:31especially the idea of doing things in
09:33groups like that the auto sort helps a
09:34ton here because if you have multiple
09:36things prefixed with large they all get
09:37bumped to be in a group together but you
09:39could also convince me something like
09:41Tailwind helper equals this where I have
09:44LG colon BG gray 200 Flex Flex column
09:50and different behaviors where you have
09:51this helper this giving me part of
09:53tailin merge where you have the media
09:55queries out as the keys and then the
09:57value is the properties but having the
09:59the keys intermixing properties and
10:02media queries makes it so I can't really
10:04rely on that the other scary part here
10:06is that the order can be changed and you
10:08can do really nasty stuff that makes the
10:11code riew here miserable like you can
10:12put this there that's cursed this just
10:15got this went from perceivably easier to
10:18review to significantly harder to review
10:20with that one small thing and to go back
10:24to the type safety point which we
10:25haven't even gotten to really the reason
10:26I like type safety is because it makes
10:29small errors less likely and often makes
10:32code reviews and consuming other
10:33people's code easier and more reliable I
10:35feel like I'm throwing that away with
10:36this even though it is type safe in the
10:38sense that this wall autocomplete it's
10:40also less reliable in the sense that the
10:42order when I read this is less
10:43consistent so yeah I'm losing as much as
10:46I'm gaining as I read again I just I
10:49can't agree that this helps with
10:50readability I just totally misunderstood
10:53what this was because of said
10:54readability theoretically a prier plugin
10:56could force that these are at the top or
10:58the bottom which is where I'd probably
10:59want them at the top so they're clearly
11:01called out there but if you're using
11:03these I would want it to have to be
11:04under some other key like here's what I
11:06would do have default have this always
11:09apply or even bass might make more sense
11:11for this but this being at the same
11:13level I hate this I hate this so much
11:16this stresses me out just looking at it
11:18anyways let's get to the cool Parts
11:20because the Coden is actually dope Panda
11:21CSS relies on Coden to generate only the
11:23styles used in the project this is
11:25another one of those things that like
11:26Panda stylex and Tailwind do that other
11:28Solutions don't I don't even want to
11:29think about how many unused classes
11:31there are shipping in the CSS for the
11:33twitch website I personally have left at
11:35least a dozen of those that will be
11:37there probably forever or until they
11:39rewrite the entire site duh yeah this
11:43solves that at any solution that solves
11:45that I'm default pretty good with so
11:47we'll see how they're doing this exactly
11:49another thing pointed out here is that
11:50stev loves that the styles are typ safe
11:52you define styles by calling the CSS
11:54function whose types only accept the
11:55Styles existing in your project the
11:57Coden also generates the the type
11:59definition of the function so it
12:00reflects Panda's configuration in the
12:02project that's also really cool this is
12:04something that kind of been hacked into
12:06Tailwind with the prettier extension but
12:09not much so honestly this kind of feels
12:10like Prisma where uses the schema you've
12:13defined to generate type definitions
12:14when you use it having a config that
12:16defines all the things you allow or
12:18enforce in your Panda setup for your
12:20project generate a type safe output it's
12:23actually really nice had have thought
12:24about that that's cool the code genen
12:26generates its output in a styled system
12:28directory at the Project's route yeah
12:29it's cool and that's actually code that
12:31becomes part of the project rather than
12:33getting stuffed as an override in your
12:35node modules again similar to Prisma
12:37really interesting to me type safety is
12:39Panda's most significant advantage over
12:41Tailwind with Tailwind developers must
12:43use a vs code extension to check the
12:44validity of the classes they wrote in a
12:46string tailin DX is deteriorated because
12:48styles are written in a string without
12:50any native type checking possibility
12:51who's going to tell this Dev about view
12:53I've never seen view catch so many
12:55Strays and I've seen view catch a lot of
12:57Strays that's hilarious that said
12:59honestly I would have largely agreed
13:01with this before the prettier plugin I
13:04love type checking I love type safety
13:06that's how my whole Channel and brand
13:07and T3 and all of this started was
13:09because I care so much about type safety
13:11and I care about it for a lot of the
13:12same reasons here the developer
13:14experience the autocomplete the
13:16reliability of doing this inside of VSS
13:18code those are all things I really cared
13:20about thankfully the Tailwind vs code
13:22extension helps a ton I can just hover
13:24over this and you see the exact class
13:26exact CSS being applied here so if I add
13:29some things here like large p8 mid P4
13:33now when I save it auto sorts itself to
13:35be in the right places there is an
13:36annoyance here of when I save it moves
13:39the thing I was just typing somewhere
13:40else sometimes but that's the biggest
13:42annoyance I have using tailent the
13:45important piece here is about the type
13:47safety what if I totally typo something
13:49like BG red 800 instead of BG d red and
13:52I save it something really interesting
13:53happens it gets bumped all the way to
13:55the front and depending on you have your
13:56config set up that might actually give
13:58give you an error which is really nice
14:00it's not type safety in the sense that
14:02typescript isn't doing it but it's wrong
14:04class safety in the sense that preder
14:06still can check and guarantee these
14:08things for you there are also eslint
14:09rules that do the same thing it's
14:10somewhat trivial to keep yourself from
14:12entering things that aren't real
14:13Tailwind classes so if we break down the
14:15benefit of type safety to less errors in
14:18the output code because they're being
14:20type checked with some form of linter or
14:22enforcer and autocomplete SL error
14:24semantics behaving better overall this
14:26solves both this is fine and I'm saying
14:29this as the typescript nerd I don't love
14:31relying on linting when I could rely on
14:32typescript but we're checking if a
14:33string has valid Keys it's not a big
14:35deal it's not the worst thing I've also
14:37just been informed by Gabriel of a
14:39pretty cool vs code plugin well it's not
14:41really vs code it's eslint and it
14:43streamlines your Tailwind code
14:44apparently interesting so if it notices
14:47you have multiple class names that could
14:48be replaced with a single one that
14:50applies the same stuff that's really
14:52nice so if you're writing two verbos of
14:54things that could be simplified it will
14:56do it for you personally I don't know if
14:57I would use this because I might have a
14:58reason I had three things in there cuz I
15:00want to change one of them sometimes and
15:02not other times was a cool idea I
15:03actually like this overall I can see why
15:05many would want to use this and it would
15:07again make the consistency of the
15:08readability of your Tailwind code base
15:10pretty pretty good not my thing I'll
15:12leave a link in the description
15:12regardless because it is interesting
15:14okay I think this is where we're going
15:15to start agreeing a lot because uh
15:17merging Styles in Tailwind isn't great
15:19this example here is something that you
15:21probably expect me to make fun of but no
15:23I've done this so many times with
15:25tailwind and it has a lot of catches
15:27like if you define the class names
15:29you're passing somewhere that isn't
15:30another TSX file or isn't being checked
15:32by your Tailwind config you're just not
15:34going to have these classes show up or
15:36if you're generating them dynamically
15:38like a thing you just cannot do in
15:39Tailwind is a function that like const
15:43get background that takes in number
15:47which can be 400 or 500 or
15:52600 and this returns BG red plus num
15:57you'd think this code would work and I
15:58could just just use this the problem
16:00here is that the way Tailwind works is
16:02it reads all your code it looks for all
16:04the strings it finds all of the strings
16:07that exist within its understanding of
16:09potential Tailwind stuff and once it has
16:11done that it generates a CSS file with
16:13all of the exact strings you have used
16:15that's why something like this works
16:16because again the Tailwind compiler is
16:18reading all your code files and it sees
16:20this value what wouldn't work again
16:23would be something like this where you
16:25pass num like this intuitively this
16:27should work but with the way the tail
16:28comp works it doesn't function and I've
16:30seen this bite lots of developers even
16:32my CTO just got bit by this like a few
16:33days ago when we were demoing some stuff
16:35this is this is scary and the only way
16:37you'll ever get this to work is if
16:39you're running some JavaScript to detect
16:41these classes I think that's cool I
16:43think it's a fair compromise and I'm
16:44already seeing people in chat saying and
16:47I love that it doesn't work static
16:48definition of styles is extremely
16:49critical to my workflow and he said he
16:51loves that this doesn't work I agree
16:53static definition of styles is almost
16:55necessary for things to scale inline
16:56styles are similar but they get none of
16:58the benefits and the markups way worse
17:00and not ordered and no yeah static
17:03Styles scale significantly better
17:05absolutely there are things for this but
17:07the easiest thing to do is honestly to
17:09just have a random file that includes
17:11one string with all the classes you need
17:13and then it gets hit by the compiler and
17:14you don't have to worry about it yeah
17:15The The J in time compiler is a good
17:17thing and we should embrace it anyways
17:19back to this so this was an example with
17:21merging Styles this is actually a really
17:23fun example because this button has a
17:25py1 so that's padding vertical one but
17:28we've now appended class names here and
17:30we're passing py4 so we want to override
17:33the default padding with this new one
17:34the problem is that it's hard to
17:35determine if the vertical padding will
17:37be overridden this might seem trivial
17:39like obviously py4 is at the end that's
17:41going to work right so we have these two
17:43elements this div has classes A and B
17:46and this div has classes b and a let's
17:48do something fun we'll Define a with
17:51background color red that all makes
17:54sense so far we're going to add
17:56something we're going to add B and this
17:58is going to have a different background
17:59color I want y'all to predict what
18:01happens when I add this background color
18:03I'm going to make it blue do you think
18:05I'll I'll pull checks I'm curious the
18:07options would be AB turns blue ba stays
18:10red AB stays Red ba turns blue actually
18:12I'm going to change this to be labeled
18:14one and two so it's a little easier the
18:15first option would be one changes blue
18:17two stays red option two is one stays
18:19red two goes blue option three is they
18:21both change I will run the poll quick so
18:23the first one has a then B second one
18:24has B than a here I have a then I'm
18:26about to define B I should have had both
18:28stay red yeah cover all options most
18:30people got it but a lot of people fell
18:32for a pretty common thing which is that
18:35you assume the order the classes appear
18:37here is the order they're applied sadly
18:38that is not the case because CSS kind of
18:40sucks the issue is that the order
18:43classes are applied to elements has
18:45nothing to do with the order you wrote
18:46them in the element it is purely based
18:49on the order they are in the CSS file
18:51this gets even more fun if your CSS
18:53loads out of order and then you could
18:54have different behaviors depending on
18:56which order the CSS loads in because
18:57it's not determined deted by what order
18:59you put the classes on it's determined
19:01by what order the CSS is given to the
19:02browser it is terrible so why am I
19:05bringing this up I'm bringing this up
19:07because let's say instead of we flip
19:09these so py4 is here and py1 is here if
19:13both of those classes are applied to
19:15this element the one you passed here
19:17isn't necessarily going to override the
19:19one that was defaulted here unless the
19:21one passed here occurs later in the CSS
19:23file we have effectively created a race
19:25condition which is not good and this
19:28will have really rough edge cases to
19:29debug I know that I've had them I had
19:31them a lot very early when I used
19:33Tailwind as the author specifies
19:35Tailwind will both generate the py1 and
19:37four classes and put them in a CSS file
19:39with the same specificity which makes
19:40the class defined last take precedence
19:42over the other one but which one I can't
19:44tell you there are many solutions to
19:46circumvent this like using the important
19:48keyword on the overriding class or sing
19:49the react component to receive a
19:51property like vertical padding letting
19:52the component choose which class to
19:53apply this is what I lean into honestly
19:56but I get why that's annoying especially
19:58for smaller teams but what you'll end up
20:00doing including us is we use tail and
20:01merge finds the classes defining the
20:03same property and it keeps the last one
20:05so if you use tail and merge with the
20:06originals and then this new class it
20:08will replace the py1 with the py4 but
20:11here is where Panda comes in because out
20:13of the box it just does that you can
20:14pass multiple objects to the CSS Helper
20:17and it will flatten that for you that's
20:19actually really nice and I like that
20:21that's built in rather than being a
20:22third party thing because it means you
20:24can optimize this with compilers much
20:25better than with Tailwind merge and
20:27you'll get the weird manic a quirks
20:29where this no longer can be GED anywhere
20:31near as clean one more quick thing on
20:32the sort order of classes this is one of
20:35the biggest reasons to use the prettier
20:36plugin when you're using Tailwind
20:37because if you're not you might
20:39accidentally put the classes in the
20:40wrong order and then the behavior is
20:42really unintuitive if you use the
20:43Tailwind prettier plugin the order that
20:44they're sorted in your code will be the
20:46same as the order it's sorted in your
20:47CSS so likelihood you hit one of those
20:49cases is significantly lower
20:52anyways component variance I've often
20:55written code like this to create a badge
20:57with variants how many places do we have
20:59like this exact same code in our code
21:01base mark I'm getting flashbacks we have
21:03a lot of things we would have used type
21:05instead of interface but otherwise we've
21:06we've written this too many times way
21:09too many times curious how they handle
21:11variant the code becomes even more
21:13complex with more variants like the
21:15badge size the issue with merging Styles
21:17is also relevant here yeah if you also
21:18want to add badge size here now you're
21:20combining a bunch of different sets of
21:22strings to try and architect that into a
21:24good to apply class this is probably
21:27where I'm going to get swung much more
21:29Pro Panda the issue with merging Styles
21:31is also relevant here and this is why
21:32things like class variance Authority and
21:34Tailwind variance both exist CVA is
21:36really dope it's created by Jo bell used
21:38to work it for cell really talented Dev
21:39focusing on making Tailwind scale way
21:41better for Design Systems it's inspired
21:43by things like stitches and vanilla
21:44extract but it lets you use Tailwind
21:46still instead it's really nice as it's
21:48becoming a theme Panda Sports is out of
21:50the box this is okay I was so scared
21:52this was still the CSS thing and it's be
21:54like oh no that's awful but no it's a
21:56separate import CVA which is nice also
22:00I'm seeing again that they're importing
22:02these from the local styled systems
22:03folder rather than from the package
22:06because it generates that it's pretty
22:07nice to see this is nice that there's
22:09this level of like deep variant
22:11behaviors built in where you can still
22:13use these chunks my question would be
22:15how much composability exists here like
22:17how easy is it for me to define the
22:20color in BG as a like a value that is
22:22type safe and then use that in multiple
22:25CVA variant sets in different places I
22:28would assume it's a pretty good story
22:29but I haven't seen it it would really
22:30come down to can I put a CSS helper here
22:32instead of just the object which as long
22:33as you can I'm sure this is great and
22:35you just grab this by using their styled
22:38helper wait does this just create a
22:41component with styled no is this styled
22:44components no you don't have to do that
22:48just make me apply this as CSS don't no
22:52I hate this so close so close they had
22:56me until you have a weird Syntax for for
22:58defining jsx H we were so close guys the
23:02variants are strongly typed
23:03automatically you must pass the status
23:05variant when using the app badge Styles
23:07or the app badge component and provide
23:09one of the defined options as long as
23:11you can call this with the specific
23:13variant key that you want to use that'd
23:15be nice but I don't love that this will
23:18result in a code base with a lot of
23:20different weirdly nested ways to Define
23:22UI like imagine that three components in
23:25this code base use the app badge helper
23:28span wrapper and then three of them
23:30couldn't use span so instead of
23:31overriding this they use this
23:33independently in three different places
23:35now you'll misleadingly make a change
23:37here thinking that it'll only affect
23:39this and then three other people's
23:40things break I see a lot of potential
23:42fragility in enabling and allowing both
23:46I would throw away this entirely if I
23:49adopted Panda this part's dope though
23:51also that it's very directly like class
23:52variance Authority like they're
23:53borrowing that pattern directly it's
23:56pattern it's pretty good I like how the
23:59library has been carefully thought out
24:00as uh don't know if I agree with the
24:02wording there but I agree that the
24:04flexibility is really nice there is much
24:06more to discover panda is a recent
24:08library and with many exciting and
24:10well-made features amongst all its
24:11features I especially like the following
24:13slot recipes some UI elements need to be
24:15separated into several parts for dialog
24:17component there might be a trigger
24:19content title description and Clos
24:21trigger Parts you would want to Define
24:22these Styles as part of the same group
24:24of component variants slot recipes offer
24:26this and park UI uses them to Define
24:28component Styles I once again have
24:31feelings this feels like it would get
24:34really nasty in the nesting really
24:36quickly and again I don't think
24:38everything needs to be done in an object
24:39when it could be done in markup
24:44like this yeah this is what's kind of
24:46confusing to me like how often would you
24:49reuse this recipe I feel like if I wrote
24:52this it would be for one component and
24:54all these things would be applied in
24:55that one component at which point I
24:57would be just as happy with three of
25:00these one for root one for control one
25:01for label that are way less deeply
25:03nested and way more readable I would
25:05personally much rather scroll up and
25:07down to these different element types to
25:09see how they're defined in the different
25:11conditions than to blend portions of
25:13them so deeply together like this this
25:17is actually I think the root of what
25:19where my uncertainty is coming from here
25:21is one of my favorite parts of Tailwind
25:23is how consistent it is when you read it
25:25it's always going to be the same it
25:26almost feels like prettier in that way
25:28where once you've made this thing always
25:30look the same it is way easier to review
25:33make changes to and have confidence in
25:34I'd even say it's like go in that way
25:36where there aren't many ways to do
25:38things and they're pretty
25:39straightforward and easy to lint this
25:41gives you too much flexibility and I
25:43can't believe I'm saying that because my
25:45whole thing is modular tools let you do
25:46what you want this one lets you do too
25:48much and I have weird feelings what are
25:49the other examples here config recipes
25:52by default Panda generates the styles
25:54for all of the class variants Authority
25:55variants even those never used at
25:57runtime using config recipes Panda can
25:59generate the CSS only for the actually
26:01used variants config recipes are
26:03extracted and generated just in time
26:04regardless of the number of recipes only
26:06the recipe variants you use will exist
26:08the recipe needs to take the class name
26:10an array of all the components that use
26:12it and a description like the
26:14description is optional but oh no you
26:16have to put it as a string this is my
26:19issue here there are just so many layers
26:22it's not necessarily bad I just
26:25personally would want like one four of
26:28this if it was easier to take a subset
26:30of all the things they offer here and
26:32enforce that I'd be cool but as soon as
26:34we're passing jsx string literal hints
26:37to generate the minimal subset of CSS
26:39being used we've lost the plot I feel
26:42like we're way too out in the woods here
26:44I feel very similar to how I feel when I
26:46was reading through Uno where there's
26:47just so many things so many things and
26:51this is why I why I loved Tailwind I
26:53feel like we escaped all of this am I
26:55about to become like the old HTM X
26:57person the get off my lawn guy because
26:59we we made it simpler I don't want to
27:01make it more complex and this this gives
27:03too many options I have to shout out n
27:05man who just pointed out that we feel
27:07very similarly here as I mentioned
27:08before Nan made Styx and if I find some
27:11random examples in here with Styx you'll
27:14see it's got options but not many it
27:16exports like two things they're pretty
27:18consistent and you call them as classes
27:22you just apply sorry not even as classes
27:24you just dump their props and it's not
27:26very deeply nested it's not super
27:28annoying to config it doesn't have a lot
27:30of weird quirks it just kind of does its
27:32thing you add the roll up plugin so it
27:34can compile up the Styles and you're
27:35mostly done it doesn't have the same
27:38level of configurability because it
27:40doesn't have a config that defines what
27:42you can and can't do the same way but
27:44you can also just write it and it works
27:46this feels much more like an in between
27:48and if I was personally to start working
27:51on a style system for a big company I
27:53would be leaning in the Styx direction
27:55for sure again Nan points out he's anti
27:57fig and I for what he is doing I dig
27:59that and this is my this is my feeling
28:02one of my older videos I did a really
28:04really good diagram that I should find
28:05so I can cite it more where I compare
28:07all these different solutions and I
28:09phrase them as Behavior libraries CSS
28:12Plus+ like things that are meant to
28:13focus on improving CSS overall and style
28:16systems a style system would be
28:17something like bootstrap or Tailwind
28:19where it defines a bunch of specific
28:20styles that you would want to apply like
28:22a button style Behavior libraries are
28:24things that handle like when the menu
28:26opens and closes accessibility tag stuff
28:27like that CSS Plus+ is things that make
28:30the actual writing of CSS a bit less
28:32painful and the weird thing about panda
28:34is it feels like it's kind of Dipping
28:37its toes in all of these when its focus
28:39is being CSS Plus+ I also would say
28:42something like Styx is really
28:43interesting because it is CSS Plus+ but
28:46it's CSS ++ with the goal of making it
28:48easy for you to build your design and
28:50style system so I would use stylex to
28:52build my own thing here and then bring
28:54in a behavior Library where with panda I
28:56would def Define the style system in
28:58their config and then use their syntax
29:00to Define my style system in my code and
29:02that back forward back where I have to
29:04switch mental contexts from config to
29:07CSS to JavaScript to potential output
29:09kind of destroys the Simplicity that I
29:11got from tailwind and yeah it feels like
29:14more steps to the same compiled output
29:16with a lot of weird edges and I'm not
29:18that into it that said this article was
29:20great and I am genuinely hyped that this
29:22was written huge shout out to baptist
29:25yeah I'll give you a sub thank you PTI
29:26for writing an awesome article I hope
29:29you take the opportunity to make some
29:31content response because I will
29:32certainly throw my audience your way as
29:34a Tailwind Dev that was a really good
29:35dive in to start to understand Panda and
29:37what its goals are and why someone would
29:38use it it's definitely not for me but
29:40I'm starting to see the value curious
29:41about you guys though were you as Jarred
29:43by the attribu toy patterns as I was or
29:45do those look exciting to you let me
29:47know in the comments super curious thank
29:48you guys as always see you in the next
