Very cool Jack, love the "I'll make a cli tool and use this easily in VSCode" mentality here too! Just compose tools together to make a smooth dev experience. Love it!
Pretty much nails it :-) tailwind plug-in has been quite buggy for me so nice to have similar solution that's completely driven off ts, plus the type safety of course, which can come in handy when passing a style as prop. Also, defs are just class so less need for utils like tailwing-merge, and panda has several nice capabilities that I look forward to taking advantage of. The panda styles are very verbose though, which is biggest con of panda compared to tw that I've found so far.
@@RolandAyala the video PandaCSS syntax is not the only one, check the docs for more, but yes, is little more verbose but because allow more complexity. Even that if you use it right with the patterns components you will be fine most of the time.
@@oscarljimenez5717 thanks, familiar w/ the docs and been using the pseudo props, which def helps, but my comment was taking already that into account, simply not as terse as typing in a flat string (tw-style). Once star using utils like clsx, tw-merge, etc., though, less so. Still, spent the day integrating panda into my project as an experiement and overall leaves me w/ positive first impression so going to forgeahead with panda because provides lots of first-class capabilities that feel less natural in tw to get right (multiple themes, semantic props, etc.) -- and as mentioned, I really like that no editor plug-in needed (if want intellisense), and surfaces as TS types.
This is really exciting. I love that Panda CSS is TS forward and that I can pick styles to include in my prop types, and that I can use any editor that supports typescript intellisense, such as Zed which I've been wanting to use in place of VS Code, but was lacking a tw plugin. I'm a hesitant to switch over from tw, which serves me well, but there's enough goodness here that I'm going to give it a try anyway and see how goes. Thanks for this video!! edit: I've been using panda-css for a couple days now (in Qwik and Remix), and the more I delve into it the more I love it. It's especially powerful if multi-theming, and I find the system to be quite intuitive. It's less abstract that tw, which is arguably a good thing so expect some minor setbacks if --- like me -- you used tw as a cruch for knowing your css (e.g., I had to spend a little time figuring out how to implement tw ring styles, which are stacked box shadows). As much as I love tw (huge fan), I'm sold on panda-css because of the multi-theming and semantic style support, which can be made to work w/ tw, but much cleaner w/ panda-css IMO.
Unrelated question: Is it advisable to pursue a degree in higher education if I’m already 2 years into my career as a software engineer? I went with a coding bootcamp and was able to find a job in EdTech. I’m unsure if it’ll be required / strongly encouraged when I’m in a position to move to another company. I would love to myself in a staff / principal position many many years down the road. Is experience alone enough to stand out?
Hey there ;) Looks really cool, however wouldn’t it be easier to use sass/css modules from the beginning of the project if we are so concerned about performance and clarity/clean code/separation of layers? Of course we are loosing dynamic props etc… but still I’m just wondering do we really need to use it :) Also what is your opinion about moving away from styled components at some point in project, when, how and to what would you switch if you’d like to get rid of styled components in your app. Would it be Panda or maybe tailwind/sass-modules? :)
I don't think performance is a factor here, either approach is a build-time approach so you are going to get great performance. With modules you have the potential of orphaned styles. Not a huge issue outside of additional bandwidth spend. I think it just comes down to style and the pattern you want ot support.
This is great, I have used ChakraUI from last 2 years and seeing this from creators of Chakra is amazing. You should do a Performance Comparison between these two as well and code size etc too. love you content
Seems like Panda is way bigger because it adds the CSS twice (in JS + in CSS) for all client components. If you do not use many client components I guess It's fine. But still not as far optimized as tw.
This is great but i fail to see how it can be better than tailwind. Can you please explain the advantages over tailwind? Is the main advantage something like using type inference to build the styling?
Since both Tailwind and Panda output to atomic CSS, the point of comparison would be developer experience Type safety greatly improves developer experience. Tailwind is great but not perfect yet. There are some DX deficiencies based on complete strings. if someone in the team does not using VSCode and there is no corresponding editor extensions, they will not have a complete experience. Another example is conflicting class names. You never know which one has higher priority. ``` // This is completely legitimate as you do not know which one is being applied during the development. // You will need to rely on additional tools to avoid this issue. ```
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
this is absolutely amazing. Been using Chakra for more than a year now, I already love it, but this is NEXT LEVEL! Would love to see you make a video about Ark UI, also made by the great team at Chakra
Upcoming video idea : Vite-plugin-ssr, ssr with react and vue the easy way. It seems neat but I haven't seen any youtube or blog post coverage about it, so you might get the edge. With people not liking the turn NextJS is taking it might be something people are interested about, keeping things simple and using tools that do one thing and do it well (it's way people used to liked react ater all right ?)
I just checked the documentation. And i will definitely give Panda CSS a try. I love creating tailwind components using CSS-COMPONENT library. But Pandas does it all with the cva
I'm still trying to work out how to get this to work as a separate UI lib with my components and styled-system exported. Love the lib, but I want to see better examples of using it as an external npm ui lib in next.js
Hey Jack👋 do you know any library like emotion for css-in-js without shorthand names, so I could use margin instead of mx? Appreaciated and amazing video as always!
It's like a JS framework, they came and go but if truly the core of it which is JS you are safe. I would sugest mastering css before following the hype of any style lib.
@@MayDie indeed, it really is. Personally I don't use it on production, because when I'm working with css/scss I just need to open mdn docs for some stuffs but with tailwind I need both mdn and tailwind docs. Even if you know css there are many things that you need to know how to implement with tailwind, it's not like you know css them you already know tailwind.
If you understand basic CSS, whether pandaCSS or tailwindCSS, windyCSS, unoCSS, emotion.js, styled component, you can name it, even plain CSS is more up to what kinds of project you are working on, and which one fits your need. Never understand why people can run into this endless argument where you choose one and you can't choose others. I guess many just don't understand the basic, because they solely relies on the abstraction, cannot understand why their codes don't work and then start to blame whatever libraries they are using. I actually never have hard to pick any one of them and get used to it within a hour for different company projects (where you have no choice to pick whatever you want), each project obviously has their own choice in terms of stylings. All those tools are just a handy layer on top of the basic CSS styles. Even the style name are mostly the same. At the end you can always go back to basic CSS if the lib can't handle certain edge cases. For beginner, you just randomly pick one, and learn the CSS while using them, you pretty much can understand all of them. Then use the advanced features when needed depending on which one you are picking. I guess I will never understand what many people are worrying/arguing about.
Go back to the pandaCSS itself, there are obviously typescript support for using css-in-js where tailwindcss has to rely on editor extension, it could be a nightmare to work with for some people without the hinting plugin. How you write responsive style without that long ugly string, of cuz, I would argue this is more a personal preference. How you can extract a style, a theme for more advanced usage where tailwindCSS tbh is not really good at or not initially design for. Come on, devs. take the meat and spit the bone.
@@blaziken7673 you could but probably you don't want to, that quite a lot of times I saw tailwindcss author feel @apply was a mistake because how devs abuse it. Where you can do it directly via CSS, now you sort of doing CSS -> tailwindcss utility class -> back to CSS class. It just somehow defeats the original purpose of using tailwindcss. Of cuz, there are always exceptions and cases where you should do it. At the end it's up to developers judgement , and how diff tools handle it less or more elegantly (or personal preference again).
@@doc8527 they abuse it because it solves those problems. There are at least two ui toolkits that abuse this to their hearts content and they are a blast to use, because they still mostly provide recipes instead of pre-built components, but in a much more streamlined and manageable way than tailwind's own UI kit does. They are like a supercharged bootstrap: easily extensible, fully(and easily) configurable, much more flexible because all of the tailwind is still available, automatically tree-shakable, easier to use in general. From my point of view tailwind is just a set of easily configurable CSS shortcuts(with some cool features here and there), not a framework, and I use it this way. I still have all the freedom I would've had using plain CSS, but I write styles much faster, can keep them close to the elements when I want to(I want it in about 95% of the time) and have many tools to easily organise my styles to keep my UI uniform. After all, idiomaticity is least of my concerns when I can write better code ignoring it.
I really like panda. I’ve just been waiting for someone to do some thing like panda, but using twin.macro and nested style objects, so that you get all the features of emotion and the speed of tail wind pretranspired for server components
Hey Jack! Just a quick heads up, but Panda Recipes are easily achievable with Tailwind CSS by using something like Class Variance Authority. Just something you shoulf know :)
This is cool and all, I've had the general oppinion for a while (and would like to hear yours, Jack), that libraries like this and tailwind etc kinda promote developers to end up in a state where they don't really understand CSS it self, I personally use emotion.js because it's basically normal css-in-js, but i'd like to hear your take Jake!
I actually think frameworks like this have taught more engineers how css works. Tailwind teaches design systems, includes sensible default atomic classes, and has great documentation
I agree that there's a lot of CSS syntax hiding behind semantics, but it appears that Panda *does* allow you write pure CSS, while also offering convenient semantics. Tailwind however, makes it incredibly difficult to step outside their semantics for more complex design.
Thanks for awesome content Jack, don’t you think js in place of css will increase rendering time for components? Really appreciate the hard work you put in pulling this together for all of us… take care!
As a frontend focused fullstack dev I can see myself utilizing this, but can't image teaching all of these to a team of oldschool fullstack devs in a team. Tailwind has great documentation, easy to understand implementation, and great ecosystem like shadcn, tailwindui and countless other projects. Cudos to the devs who worked on this, but tw solves pretty much many problems all we have and can't really see the risk and benefits of this abstraction.
```col-span-md-5``` vs ```gridItem({ colSpan: { md: 5 } })``` The latter is not only more verbose, it's alien syntax. That alone is enough for this to be a hard-pass. Add on the fact that this will only work in JS parsed components, it actually makes things worse as you now have to be mindful of when to use this syntax, versus when to use normal css selectors. Additionally, you're now introducing new dependencies to your components, as well as cluttering them with additional imports. That pattern doesn't scale well. The point of tailwind and css frameworks like it, is for it to be compositional and re-usable chunks of styling across the board. If you're doing this, you might as well not even use tailwind.
Well when you begin to have more grid properties it become less verbose because you don’t have to repeat yourself. But I still think that this library is too different from the usual way of styling, trying to do stuff their own way, it is not for me.
This is not the cleaneast way of writing PandaCSS 😅. PandaCSS was build with the same mentality of Chakra UI but better, because it is the next generation of Chakra UI. So in PandaCSS you will write: or The point of PandaCSS is actually scale way more CSS than Tailwind, because is also component base css just like Tailwind, with JIT generation of styles just like Tailwind, but with typesafe tokens and properties. So with PandaCSS you could actually edit your config file (this is not ecourged in Tailwind because then is hard to rollback the styles because you can lose track of them) and change it every time you want, because typescript will warning you of everything. Also you can lock your styles so nobody can change or add random styles to your style system, this is huge in mantenibility of code. So in the end PandaCSS scale way way much than TailwindCSS. Also you have panda studio :)
Tailwind won't be seen anywhere in enterprise or large business. If it works for you, great, but larger companies need a far better answer than Tailwind.
I've just moved my vanilla-extract project back to good old, plain CSS (made the decision because of RSC). I'm tired of all these CSS-in-JS solutions over-complicating styling and causing massive headaches. There's something liberating and refreshing about using old-fashioned CSS, or even SCSS. No need for Panda or anything else, as far as I'm concerned.
PandaCSS was first tried using vanilla-extract, but in the end just result in a postcss plugin. Plain CSS is good, but is not scale well, that's the why for too many frameworks.
I'm currently 2 years in on a large PWA React project where the CSS is written completely from scratch, no libraries no CSS in JS. It's less than 50KB before gzip so we never even considered wasting time on extracting critical CSS which would be one of the only positives you could come up with in favor of CSS in JS. Since it's all plain CSS (scss) no brain capacity is wasted on learning another pointless abstraction API. I'm convinced CSS in JS was invented for boilerplate UIs where you take a library and never write any CSS yourself. But as soon as you need something custom, CSS in JS becomes a massive headache.
Why you said that? With Tailwind or PandaCSS those 50kb will be 10kb or less. Also how is your experience with adding config properties and variables in pure CSS? Probably not good, because in large and old codebases if you change something you will break a lot of places without noticed (in Tailwind happen the same, but at least you can extract the majority of the style logic at component level and reduce the chances). In PandaCSS this will never happen, because is typesafe token and properties, you can add or edit your config and typescript will warning you if you break anything. This is almost the same argument as JS vs TS, some devs love vanilla JS, but none love scale huge codebases of vanilla JS, so that's why TS was born. PandaCSS is CSS that scale, simple as that, you will write more mantenible css code if you use it, and in my opinion is very more readable that Tailwind, and you don't have to learn anything, just use CSS. Also usually using pure CSS is more work because premature separation of concerns is usually a mistake.
I personally much prefer to write something like "flex flex-col gap-4 w-full" instead of creating a file, naming and writing a CSS class, importing it into the component and then after some time not being able to immediately understand what exactly this class does without searching for it in other file. TW has many other benefits, but this is what drawn me in.
That's not how CSS works. The order you apply class selectors on an element has no bearing in how styling is applied. The order in which you declare your css selectors in your stylesheet does.
looks awful and useless. you know tailwind it would be faster for me to write short classes mx-auto text-white etc and you understand them, you know what they mean. And imagine that a button will have with 20 different styles depending on its behavior when hovering, when active, etc. And this panda will write all these styles in 800 extra lines. What is shorter than alignItems: "center" or items-center; justifyContent: "center" or justify-center. Panda bloats the source code of styles very much, and it needs to be converted.
Ok, good points. But how do you handle themes, breakpoints and events in tailwind in a readable way, oh no, you can't. Tailwind is good when you only have to do simple stuff, but the moment when you start doing complex styles it turn super ugly to work with. Also PandaCSS have typesafe tokens, so in PandaCSS you can actually make changes to you config and not break anything ever, in Tailwind config if you add something to the config you can never remove it, so nobody change anything in the config. Tailwind is very good, PandaCSS just scale way better. Also you have others syntax that Jack don't show in the video. Tailwind: PandaCSS: //yep is built in component like every other pattern, Flex, HStack, VStack, Grid etc. or And i also don't wanna start with Themes in tailwind, only dark mode and light mode pff, in PandaCSS you can have Infinity, and all with autocomplete, performance css output and token and properties typesafety
@@oscarljimenez5717 daisy ui and skeleton ui, which are built entirely on tailwind, provide infinite themes options, they showcase this on their respective sites. It's easy to do yourself. I can make my own component in like 10 seconds. I if I have 3+ styles for breakpoints/effects I do them as ${[].join(" sm:")}. If I have too many styles, TW has all the necessary directives and functions to extract my styles from a class="" to CSS. It even plays nicely with sass/less, if you need. Didn't understand the config argument, in which case removing something from a config would not break things? Typesafety in CSS was never a problem, never will be. Output should be similar between panda and tailwind. Idk about performance, is there something tailwind does that is heavier that transpiling JSON into CSS?
@@blaziken7673 the config point is that in a large codebase of tailwind if you add something is hard or imposible to remove it, because you can break things without a warning, Tailwind have a ugly history of mantenibility. This in PandaCSS never happen because if you remove something in your config typescript will warning you. This is very very useful when design a style system, Tailwind encourage you to only use them style system config (colors, spacing, etc) but it not cover every angle. This make PandaCSS way way more scalable than TailwindCSS it self. Yeah, you can do a Center component with forwardRef in 10 sec, but with PandaCSS is 0, because is already build in, and for your surprise in the majority of tailwind codebases don't do it, so PandaCSS is encouraging a good practice of compose your styles in component way, many TailwindCSS developers miss this. Also you have panda studio to inspect and share your style system with your team, in Tailwind you have to build it or depend of third party package. And yeah with Tailwind you can have animations, scroll, more themes etc if you install 10 thousand packages more and install 5 vscode plugin to make it work with some complex cva regex that break every time, but with PandaCSS is just install and you got everything, easier to share same DX with your team, don't need for more, you have a vscode plugin also if you want the hover effect from tailwind but for PandaCSS. And if you're a starter, you don't need to learn new language, aka the tailwind language, you can just write CSS the way you always do and change it when you wanna to look something like Tailwind or other thing. Also in my opinion writing complex styles like breakpoints, themes and even cva is way more easier in PandaCSS than in Tailwind. My final take is that Tailwind is good for small to medium proyects, PandaCSS is good for every kind of proyect, but yeah for small proyects tailwind is probably faster for someone who not use PandaCSS very often and is an expert or know already Tailwind.
"Ah yeah, I can finally write my neat simple TW classes as a much more verbose JSON and then learn some additional concepts that make this work" -- statement dreamed up by the utterly deranged. Why does this exist, what are the benefits over the TW??
Mantenibility and more power to achieve more complex styles. And actually the way that Jack show in the video is not the only one, for example this is the way or
I have 25 years using CSS experience and 0 tailwind experience, and this tutorial gave me 0 explanation of what it is, what it does, why it does it well and how it's better than alternatives. Waste of time. My feedback is to give more context. Also I'm sure there's a steeeep learning curve for tailwind because md-px-5 and w-10 don't mean anything in CSS so I fail to see why cryptic abstractions are useful. Likewise hstack and vstack should be considered harmful due to inflexibility of the layout they would introduce. Downvote on the video and the tech.
Barbenheimer got me.
Very cool Jack, love the "I'll make a cli tool and use this easily in VSCode" mentality here too! Just compose tools together to make a smooth dev experience. Love it!
Should be a built-in, I mean... really. Routing a selection through STDIN and grabbing STDOUT is like the *ix Prime Directive.
So Panda is Type-Safe Tailwind without the need for an editor plugin?
Pretty much nails it :-) tailwind plug-in has been quite buggy for me so nice to have similar solution that's completely driven off ts, plus the type safety of course, which can come in handy when passing a style as prop. Also, defs are just class so less need for utils like tailwing-merge, and panda has several nice capabilities that I look forward to taking advantage of. The panda styles are very verbose though, which is biggest con of panda compared to tw that I've found so far.
@@RolandAyala the video PandaCSS syntax is not the only one, check the docs for more, but yes, is little more verbose but because allow more complexity. Even that if you use it right with the patterns components you will be fine most of the time.
@@oscarljimenez5717 thanks, familiar w/ the docs and been using the pseudo props, which def helps, but my comment was taking already that into account, simply not as terse as typing in a flat string (tw-style). Once star using utils like clsx, tw-merge, etc., though, less so. Still, spent the day integrating panda into my project as an experiement and overall leaves me w/ positive first impression so going to forgeahead with panda because provides lots of first-class capabilities that feel less natural in tw to get right (multiple themes, semantic props, etc.) -- and as mentioned, I really like that no editor plug-in needed (if want intellisense), and surfaces as TS types.
This is really exciting. I love that Panda CSS is TS forward and that I can pick styles to include in my prop types, and that I can use any editor that supports typescript intellisense, such as Zed which I've been wanting to use in place of VS Code, but was lacking a tw plugin. I'm a hesitant to switch over from tw, which serves me well, but there's enough goodness here that I'm going to give it a try anyway and see how goes. Thanks for this video!!
edit: I've been using panda-css for a couple days now (in Qwik and Remix), and the more I delve into it the more I love it. It's especially powerful if multi-theming, and I find the system to be quite intuitive. It's less abstract that tw, which is arguably a good thing so expect some minor setbacks if --- like me -- you used tw as a cruch for knowing your css (e.g., I had to spend a little time figuring out how to implement tw ring styles, which are stacked box shadows). As much as I love tw (huge fan), I'm sold on panda-css because of the multi-theming and semantic style support, which can be made to work w/ tw, but much cleaner w/ panda-css IMO.
I knew about Panda and I love Chakra but I didn't know they were related! Thanks for the vid.
PandaCSS will be the css engine in the future for Chakra UI, right now is not. I'm a huge fan of PandaCSS :)
Unrelated question: Is it advisable to pursue a degree in higher education if I’m already 2 years into my career as a software engineer? I went with a coding bootcamp and was able to find a job in EdTech. I’m unsure if it’ll be required / strongly encouraged when I’m in a position to move to another company. I would love to myself in a staff / principal position many many years down the road. Is experience alone enough to stand out?
Experience will get you to Principal, I can vouch for that. :)
Hey there ;) Looks really cool, however wouldn’t it be easier to use sass/css modules from the beginning of the project if we are so concerned about performance and clarity/clean code/separation of layers? Of course we are loosing dynamic props etc… but still I’m just wondering do we really need to use it :)
Also what is your opinion about moving away from styled components at some point in project, when, how and to what would you switch if you’d like to get rid of styled components in your app. Would it be Panda or maybe tailwind/sass-modules? :)
I don't think performance is a factor here, either approach is a build-time approach so you are going to get great performance. With modules you have the potential of orphaned styles. Not a huge issue outside of additional bandwidth spend. I think it just comes down to style and the pattern you want ot support.
@@jherr great! ;) Thank you for the opinion, love your content! Greetings from Poland :)
Separation of concerns is a mistake a lot of the time.
This is great, I have used ChakraUI from last 2 years and seeing this from creators of Chakra is amazing. You should do a Performance Comparison between these two as well and code size etc too. love you content
Seems like Panda is way bigger because it adds the CSS twice (in JS + in CSS) for all client components. If you do not use many client components I guess It's fine. But still not as far optimized as tw.
@@tilmanmarquart8744this is wrong. PandaCSS only work at build time, it generate CSS only once just like Tailwind does.
it looks really cool. i'm gonna take this into our project. i had hard time using css modules on RSC until now...
This is great but i fail to see how it can be better than tailwind. Can you please explain the advantages over tailwind? Is the main advantage something like using type inference to build the styling?
Since both Tailwind and Panda output to atomic CSS, the point of comparison would be developer experience Type safety greatly improves developer experience. Tailwind is great but not perfect yet. There are some DX deficiencies based on complete strings. if someone in the team does not using VSCode and there is no corresponding editor extensions, they will not have a complete experience. Another example is conflicting class names. You never know which one has higher priority.
```
// This is completely legitimate as you do not know which one is being applied during the development.
// You will need to rely on additional tools to avoid this issue.
```
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
this is absolutely amazing. Been using Chakra for more than a year now, I already love it, but this is NEXT LEVEL!
Would love to see you make a video about Ark UI, also made by the great team at Chakra
Oh wow, I hadn't seen Ark UI. Thank you so much for the heads up!
@@jherr Take a look at ZagJS too
Upcoming video idea : Vite-plugin-ssr, ssr with react and vue the easy way.
It seems neat but I haven't seen any youtube or blog post coverage about it, so you might get the edge.
With people not liking the turn NextJS is taking it might be something people are interested about, keeping things simple and using tools that do one thing and do it well (it's way people used to liked react ater all right ?)
I just checked the documentation. And i will definitely give Panda CSS a try.
I love creating tailwind components using CSS-COMPONENT library. But Pandas does it all with the cva
I truly hope that Panda will save us from tailwind :)
Great video, thanks!
how do i make my terminal like that with those colours?
also what theme are you using for vscode?
Hey Jack, amazing video, you should also see the config strictTokens flag and panda studio command 👀.
Great stuff as usual! Do you use warp as the integrated terminal and if yes - whats the themeing setup thats in this video?
I'm still trying to work out how to get this to work as a separate UI lib with my components and styled-system exported. Love the lib, but I want to see better examples of using it as an external npm ui lib in next.js
And recipes are really cool. I enjoyed them in stitches
Wow wow woooow... this is amazingly I'm defiently going to check this out, thanks so much for sharing this.
Thanks Jack, great intro as usual 🔥
Hey Jack👋 do you know any library like emotion for css-in-js without shorthand names, so I could use margin instead of mx? Appreaciated and amazing video as always!
I fail to understand the benefits of using Tailwind over basic css, but since everybody seems to love it I guess I'll have to give it another chance
It's like a JS framework, they came and go but if truly the core of it which is JS you are safe.
I would sugest mastering css before following the hype of any style lib.
@@derciojds I master css, I just don't understand the point of Tailwind, it looks like extra steps for the same thing from what I understood
@@MayDie indeed, it really is. Personally I don't use it on production, because when I'm working with css/scss I just need to open mdn docs for some stuffs but with tailwind I need both mdn and tailwind docs.
Even if you know css there are many things that you need to know how to implement with tailwind, it's not like you know css them you already know tailwind.
what font are you using?
literally converted my whole repo to css modules two days ago 😅
i need to binge some docs and videos for a while I guess, frontend backend collab that happening is good.
If you understand basic CSS, whether pandaCSS or tailwindCSS, windyCSS, unoCSS, emotion.js, styled component, you can name it, even plain CSS is more up to what kinds of project you are working on, and which one fits your need. Never understand why people can run into this endless argument where you choose one and you can't choose others. I guess many just don't understand the basic, because they solely relies on the abstraction, cannot understand why their codes don't work and then start to blame whatever libraries they are using.
I actually never have hard to pick any one of them and get used to it within a hour for different company projects (where you have no choice to pick whatever you want), each project obviously has their own choice in terms of stylings. All those tools are just a handy layer on top of the basic CSS styles. Even the style name are mostly the same. At the end you can always go back to basic CSS if the lib can't handle certain edge cases.
For beginner, you just randomly pick one, and learn the CSS while using them, you pretty much can understand all of them.
Then use the advanced features when needed depending on which one you are picking.
I guess I will never understand what many people are worrying/arguing about.
Go back to the pandaCSS itself, there are obviously typescript support for using css-in-js where tailwindcss has to rely on editor extension, it could be a nightmare to work with for some people without the hinting plugin.
How you write responsive style without that long ugly string, of cuz, I would argue this is more a personal preference.
How you can extract a style, a theme for more advanced usage where tailwindCSS tbh is not really good at or not initially design for.
Come on, devs. take the meat and spit the bone.
@@doc8527 you could speak many languages and you choose to speak the truth. PandaCSS is amazing :)
@@doc8527or both "how" questions the answer is tailwind's @apply and @layer
@@blaziken7673 you could but probably you don't want to, that quite a lot of times I saw tailwindcss author feel @apply was a mistake because how devs abuse it. Where you can do it directly via CSS, now you sort of doing
CSS -> tailwindcss utility class -> back to CSS class.
It just somehow defeats the original purpose of using tailwindcss. Of cuz, there are always exceptions and cases where you should do it. At the end it's up to developers judgement , and how diff tools handle it less or more elegantly (or personal preference again).
@@doc8527 they abuse it because it solves those problems. There are at least two ui toolkits that abuse this to their hearts content and they are a blast to use, because they still mostly provide recipes instead of pre-built components, but in a much more streamlined and manageable way than tailwind's own UI kit does. They are like a supercharged bootstrap: easily extensible, fully(and easily) configurable, much more flexible because all of the tailwind is still available, automatically tree-shakable, easier to use in general.
From my point of view tailwind is just a set of easily configurable CSS shortcuts(with some cool features here and there), not a framework, and I use it this way. I still have all the freedom I would've had using plain CSS, but I write styles much faster, can keep them close to the elements when I want to(I want it in about 95% of the time) and have many tools to easily organise my styles to keep my UI uniform.
After all, idiomaticity is least of my concerns when I can write better code ignoring it.
Great video! Forcing someone to choose between the two movies violates the spirit of Barbenheimer but aside from that it is a great video hehe
as others have commented. What's the practical use case of converting from tailwind to panda? Only gets more verbose
Typesafety and you can use normal css names.
I really like panda. I’ve just been waiting for someone to do some thing like panda, but using twin.macro and nested style objects, so that you get all the features of emotion and the speed of tail wind pretranspired for server components
Something like the mantine styles api but based on tailwind class strings
The vote server action isn’t properly typed. You’re missing the `async` keyword.
10:15 - Took a moment for it to sink in... Styles have been de-coupled from Javascript!
Great video as always Jack
Grouping mediaqueries, pseudo-classes and pseudo-elements in tailwind would be the next logical upgrade.
Hey Jack! Just a quick heads up, but Panda Recipes are easily achievable with Tailwind CSS by using something like Class Variance Authority. Just something you shoulf know :)
Yeah, I've seen CVA in a few places now. Great to see it!
Huh this looks cool thanks for sharing
This is a good turnaround for CSS in JS libs but it cannot beat the purpose of using tw 😅
This is cool and all, I've had the general oppinion for a while (and would like to hear yours, Jack), that libraries like this and tailwind etc kinda promote developers to end up in a state where they don't really understand CSS it self, I personally use emotion.js because it's basically normal css-in-js, but i'd like to hear your take Jake!
I actually think frameworks like this have taught more engineers how css works. Tailwind teaches design systems, includes sensible default atomic classes, and has great documentation
@@AbstruseJoker I don't agree with that, it teaches you how to use a framework, not how to use css but each to their own
I agree that there's a lot of CSS syntax hiding behind semantics, but it appears that Panda *does* allow you write pure CSS, while also offering convenient semantics. Tailwind however, makes it incredibly difficult to step outside their semantics for more complex design.
Thanks for awesome content Jack, don’t you think js in place of css will increase rendering time for components? Really appreciate the hard work you put in pulling this together for all of us… take care!
at this point I guess panda is better than vanilla-extract, because of the taliwind defaults
Thanks for sharing.
Isn't it coming back to JSS? What about vanilla-css?
As a frontend focused fullstack dev I can see myself utilizing this, but can't image teaching all of these to a team of oldschool fullstack devs in a team. Tailwind has great documentation, easy to understand implementation, and great ecosystem like shadcn, tailwindui and countless other projects. Cudos to the devs who worked on this, but tw solves pretty much many problems all we have and can't really see the risk and benefits of this abstraction.
This is really awesome!
copy parse flow is the best, tailwind is the best
```col-span-md-5``` vs ```gridItem({ colSpan: { md: 5 } })```
The latter is not only more verbose, it's alien syntax. That alone is enough for this to be a hard-pass.
Add on the fact that this will only work in JS parsed components, it actually makes things worse as you now have to be mindful of when to use this syntax, versus when to use normal css selectors. Additionally, you're now introducing new dependencies to your components, as well as cluttering them with additional imports. That pattern doesn't scale well.
The point of tailwind and css frameworks like it, is for it to be compositional and re-usable chunks of styling across the board. If you're doing this, you might as well not even use tailwind.
Well when you begin to have more grid properties it become less verbose because you don’t have to repeat yourself.
But I still think that this library is too different from the usual way of styling, trying to do stuff their own way, it is not for me.
This is not the cleaneast way of writing PandaCSS 😅. PandaCSS was build with the same mentality of Chakra UI but better, because it is the next generation of Chakra UI.
So in PandaCSS you will write:
or
The point of PandaCSS is actually scale way more CSS than Tailwind, because is also component base css just like Tailwind, with JIT generation of styles just like Tailwind, but with typesafe tokens and properties. So with PandaCSS you could actually edit your config file (this is not ecourged in Tailwind because then is hard to rollback the styles because you can lose track of them) and change it every time you want, because typescript will warning you of everything. Also you can lock your styles so nobody can change or add random styles to your style system, this is huge in mantenibility of code. So in the end PandaCSS scale way way much than TailwindCSS. Also you have panda studio :)
Thats awesome 🎉🎉
I'm tired of learning new technology every damn month. I will stick to tailwind and focus instead on making money.
Tailwind won't be seen anywhere in enterprise or large business. If it works for you, great, but larger companies need a far better answer than Tailwind.
@@coherentpanda7115 BS
So it's just plain css written in js?
I've just moved my vanilla-extract project back to good old, plain CSS (made the decision because of RSC). I'm tired of all these CSS-in-JS solutions over-complicating styling and causing massive headaches. There's something liberating and refreshing about using old-fashioned CSS, or even SCSS. No need for Panda or anything else, as far as I'm concerned.
PandaCSS was first tried using vanilla-extract, but in the end just result in a postcss plugin. Plain CSS is good, but is not scale well, that's the why for too many frameworks.
I'll stick with normal tailwindcss
I'm currently 2 years in on a large PWA React project where the CSS is written completely from scratch, no libraries no CSS in JS. It's less than 50KB before gzip so we never even considered wasting time on extracting critical CSS which would be one of the only positives you could come up with in favor of CSS in JS. Since it's all plain CSS (scss) no brain capacity is wasted on learning another pointless abstraction API. I'm convinced CSS in JS was invented for boilerplate UIs where you take a library and never write any CSS yourself. But as soon as you need something custom, CSS in JS becomes a massive headache.
Why you said that? With Tailwind or PandaCSS those 50kb will be 10kb or less. Also how is your experience with adding config properties and variables in pure CSS? Probably not good, because in large and old codebases if you change something you will break a lot of places without noticed (in Tailwind happen the same, but at least you can extract the majority of the style logic at component level and reduce the chances). In PandaCSS this will never happen, because is typesafe token and properties, you can add or edit your config and typescript will warning you if you break anything. This is almost the same argument as JS vs TS, some devs love vanilla JS, but none love scale huge codebases of vanilla JS, so that's why TS was born. PandaCSS is CSS that scale, simple as that, you will write more mantenible css code if you use it, and in my opinion is very more readable that Tailwind, and you don't have to learn anything, just use CSS. Also usually using pure CSS is more work because premature separation of concerns is usually a mistake.
I personally much prefer to write something like "flex flex-col gap-4 w-full" instead of creating a file, naming and writing a CSS class, importing it into the component and then after some time not being able to immediately understand what exactly this class does without searching for it in other file.
TW has many other benefits, but this is what drawn me in.
Apparently it still does not solve the "specificity war" problem, where the last class applied always wins.
And how do you want that to be solved?
That's not how CSS works. The order you apply class selectors on an element has no bearing in how styling is applied. The order in which you declare your css selectors in your stylesheet does.
looks awful and useless. you know tailwind it would be faster for me to write short classes mx-auto text-white etc and you understand them, you know what they mean. And imagine that a button will have with 20 different styles depending on its behavior when hovering, when active, etc. And this panda will write all these styles in 800 extra lines.
What is shorter than alignItems: "center" or items-center; justifyContent: "center" or justify-center.
Panda bloats the source code of styles very much, and it needs to be converted.
Ok, good points. But how do you handle themes, breakpoints and events in tailwind in a readable way, oh no, you can't. Tailwind is good when you only have to do simple stuff, but the moment when you start doing complex styles it turn super ugly to work with. Also PandaCSS have typesafe tokens, so in PandaCSS you can actually make changes to you config and not break anything ever, in Tailwind config if you add something to the config you can never remove it, so nobody change anything in the config. Tailwind is very good, PandaCSS just scale way better. Also you have others syntax that Jack don't show in the video.
Tailwind:
PandaCSS: //yep is built in component like every other pattern, Flex, HStack, VStack, Grid etc.
or
And i also don't wanna start with Themes in tailwind, only dark mode and light mode pff, in PandaCSS you can have Infinity, and all with autocomplete, performance css output and token and properties typesafety
@@oscarljimenez5717 daisy ui and skeleton ui, which are built entirely on tailwind, provide infinite themes options, they showcase this on their respective sites. It's easy to do yourself.
I can make my own component in like 10 seconds.
I if I have 3+ styles for breakpoints/effects I do them as ${[].join(" sm:")}.
If I have too many styles, TW has all the necessary directives and functions to extract my styles from a class="" to CSS. It even plays nicely with sass/less, if you need.
Didn't understand the config argument, in which case removing something from a config would not break things?
Typesafety in CSS was never a problem, never will be. Output should be similar between panda and tailwind. Idk about performance, is there something tailwind does that is heavier that transpiling JSON into CSS?
@@blaziken7673 the config point is that in a large codebase of tailwind if you add something is hard or imposible to remove it, because you can break things without a warning, Tailwind have a ugly history of mantenibility. This in PandaCSS never happen because if you remove something in your config typescript will warning you. This is very very useful when design a style system, Tailwind encourage you to only use them style system config (colors, spacing, etc) but it not cover every angle. This make PandaCSS way way more scalable than TailwindCSS it self. Yeah, you can do a Center component with forwardRef in 10 sec, but with PandaCSS is 0, because is already build in, and for your surprise in the majority of tailwind codebases don't do it, so PandaCSS is encouraging a good practice of compose your styles in component way, many TailwindCSS developers miss this. Also you have panda studio to inspect and share your style system with your team, in Tailwind you have to build it or depend of third party package. And yeah with Tailwind you can have animations, scroll, more themes etc if you install 10 thousand packages more and install 5 vscode plugin to make it work with some complex cva regex that break every time, but with PandaCSS is just install and you got everything, easier to share same DX with your team, don't need for more, you have a vscode plugin also if you want the hover effect from tailwind but for PandaCSS. And if you're a starter, you don't need to learn new language, aka the tailwind language, you can just write CSS the way you always do and change it when you wanna to look something like Tailwind or other thing. Also in my opinion writing complex styles like breakpoints, themes and even cva is way more easier in PandaCSS than in Tailwind. My final take is that Tailwind is good for small to medium proyects, PandaCSS is good for every kind of proyect, but yeah for small proyects tailwind is probably faster for someone who not use PandaCSS very often and is an expert or know already Tailwind.
"Ah yeah, I can finally write my neat simple TW classes as a much more verbose JSON and then learn some additional concepts that make this work" -- statement dreamed up by the utterly deranged. Why does this exist, what are the benefits over the TW??
Still not convinced either but that was uncalled for
@@quoccuong1733 (no offence, that's was just a "stop doing math" meme reference)
@@blaziken7673 lol. sorry i didnt know
Mantenibility and more power to achieve more complex styles. And actually the way that Jack show in the video is not the only one, for example this is the way
or
I realy didnt get it. Over tailwind
Typesafe config and tokens, and more readable syntax for advanced styles. Also you have more tools.
it's cool but I'll stick with tailwind
If only they replaced ':' with '-' and ',' with spaces...Tailwind on steroids.
I actually prefer : over -, is closer in my keyboard :)
I am ok with not perfect systems. Please dont invent anymore thing
Too much tooling for a css.
Just use Tailwind? 🤷♂
I have 25 years using CSS experience and 0 tailwind experience, and this tutorial gave me 0 explanation of what it is, what it does, why it does it well and how it's better than alternatives. Waste of time. My feedback is to give more context. Also I'm sure there's a steeeep learning curve for tailwind because md-px-5 and w-10 don't mean anything in CSS so I fail to see why cryptic abstractions are useful. Likewise hstack and vstack should be considered harmful due to inflexibility of the layout they would introduce. Downvote on the video and the tech.
how is you wife now. sir ? would Love to get update on that.
CSS-in-JS... not cool.
It's 2023, CSS in JS is the standard in React projects.
@@coherentpanda7115 mmm, I don't think so. Who said that CSS in JS is a standard you or some random company?
is this production ready?