Panda CSS First Impressions | Theo Reacts 

🤑

Thems fightin’ words. And I’m here for it.🍿

...fair

Exactly. This is the main reason I prefer svelte to React. Wasting my time writing extra functions and return statements with curly braces etc

Actually, there's hundreds of TypeScript libraries for CSS. Most of them are insane.

React has built in types for css attributes, it’s nothing new

Yeah! I hate it when my compiler catches typos.

🤣🤣

Yeah, very funny. However I would argue that with where IDEs are going and with AI like Copilot, I don't actually type all these extra characters he is complaining about; I'd argue that its actually quicker to write my CSS this way with the aid of tools like Copilot than the tailwind classes. I think again this depends on the type of project you are working in, how often you're changing the styles etc.

what is even going on? Panda vs TW? Isn't Panda more like Styled Components, emotion, radium, ? Also this totally removes why TW is used... TW is used for one reason, Not having to write CSS syntax but Classes directly. Panda seems to be 90% syntax based.

I have rarely needed to switch out classes based on state. CSS is immensely powerful for defining styling for multiple combinations of state, especially additively. I almost always resort to put my state in either ARIA, or if they don't fit, I use data attributes. Then apply the styles I need using attribute selectors. This also works well with tailwind's `group` class for conditionally styling children based on parent state, without them having to pass that state everywhere just for styling purposes. This way also gives you the ability to align the UX with accessibility very easily. For example, if you have a nav with nav items and want to represent the current selected item/page, you can add the state on aria-current, and then style them with [aria-current=true] selector.

This would be a great addition to already great solution.

There aren't complex selectors in tailwind, no. The idea is that if you are using tailwind there is no need for complex selectors because there is no label that :has an input inside of it, instead there is just a label with extra classes. But even if you need complex selectors, tailwind is just an addon, you can always just write a custom class and custom selectors and just run them beside tailwind, you can also just add tailwind to existing projects and only use it starting from then and refactor old code as you go along

I don't think consistent class order has any impact on performance. It's more for predictability and readability. But 'performance' encapsulates many topics so maybe you're thinking of something different than me.

yeah, the comments really show the audience of theo. mostly indie devs or people in small projects.

What is actually unmaintainable about Tailwind on large projects? You still use components and work with them, it's not like you copy paste all those classes around each time you use an element? You create a component and you use it, what does Tailwind actually make worse about that? And btw, any project is unmaintainable if developers are messy. I unfortunately had the "pleasure" to work in a styled-components codebase that had type safety with Typescript and well defined design tokens and it sucked. It was the worst experience I had writing CSS ever. I would pick Tailwind over that any day of the week. Hell, I would pick working in fully vanilla CSS over that experience any day of the week.

No, those strings are to create new Components. You're not assign it to Components, your creating Components with styles. But that's a advanced use case that usually nobody should use. But they want to give you the ability to do it.

@@oscarljimenez5717 ooh okay thats interesting, didnt realize that

arc

skill issue and a multiline formatter for tailwind is a better idea than reinventing tw for worse

A 500 characters line of tailwind class names is likely the developer not writing decent code.

@@syedmohammadsannan964 ...or a developer writing good hover and focus states

​@@fungilationMy point here is that Theo went into this very biased and completely missed the point of Panda and went on a tangent about various non-core features

@@syedmohammadsannan964 Not at all. An example would be writing focus and hover states which often takes an absolute shit ton of Tailwind classes. When I worked with Panda I created a custom "hocus" condition for hover and focus style combined. Custom styling conditions coupled with layer styles made the Panda styling way simpler than in Tailwind

CSS is more complex than Panda CSS then. Because you have a thousand ways to declare CSS and in different fashions (BEM? OOCSS? Neither?) so if complexity was the argument against Panda CSS, I don't understand your point. CSS modules only solves one problem, which is scoped styles. But the tools you mentioned avoids that too.

@@dealloc if you have scoped CSS, you don't need any naming convention like BEM or OOCSS anymore. That's the one major problem solved. The rest are well-documented CSS standards. So I think plain CSS, especially with CSS Modules, is way simpler and easier to get.

@@VeitLehmann You still need to name every class for every element that needs some styling, whether it's necessary or not. The problem of duplication is still prevalent, since they are scoped and makes it impossible to merge identical classes between scopes. CSS Modules is easy when you're working on single projects, but as you grow to multiple codebases it becomes increasingly harder to scale. I'm not against CSS Modules. But this is based on my personal experience, working on codebases across multiple projects. It grows exponentially, compared to solutions like Tailwind and StyleX, which grows linearly.

It's common to allow passing className from parent components. It allows for those components to be reused without having to define and update the component API with a ton of props just for styling purposes.

@@deallocJust had a case today that I needed to do that. Definitely retracting my comment.

If I want to have flexibility, I may choose shadcn-ui. If I need a component library that works out of the box, I will choose mantine. I've used chakra in several projects, and it's fine, but I don't seem to have a reason to use it anymore.

I've actually come across a few cases where I couldn't control certain parts of a chakra component via the API they provided. Other than that, it as a nice experience overall

It makes decision-making harder and parsing code harder. I like not having too much flexibility. I like being restricted, it usually makes me faster to program.

That’s what people likes about Go, no class level visibility modifier, no sealed class, no default implementation in interfaces, no inheritance, no a lot of things, which makes development in Go straight forward

react is too flexible, I would just htmx, no reredering no state management not a lot of things which makes development straight forward

@larbi State management is part of any meaningful application.

CSS vars is the problem there. You don't have s way of having safe CSS vars. And also you could ended in huge bundle size. Btw, I'm a fan too, i use SASS modules at work, so i learn all their limits there.

@@oscarljimenez5717 That's just an editor problem. CSS vars can be statically analysed. In fact, I believe it's even built in to VSCode Intellisense if I am not wrong. As for your bundle size point. Yes this is a huge part of why things like Stitches, StyleX and Tailwind exists, and why prior art of "utility css" were conceived. Meta should know, they did a ton of work to minimize the amount of CSS they shipped on Instagram and Facebook, even prior to StyleX. That, and naming things sucks.

@@dealloc that's not a editor problem only, because you could have CSS variables that you received from your Node Modules, PandaCSS fix that. Everything is Typesafe, you can go many repos, proyects and packages.

@@oscarljimenez5717 As long as your CSS is imported _somewhere_, doesn't matter if from HTML (link/style), CSS (@import) or JS modules (import), it is technically possible to statically analyse any variables and different scopes. node modules are stored in your file system, so that's not a problem.

@@dealloc yeah, but that's not simple as you think. You could have some vars that you wanna import and some you don't. Usually TS, ESLint, etc, will ignore node_modules because can be super slow. So i understand your point, but is not so easy.

Good catch, just added! Love y'all 🙏

I agree with this. I have used it to generate all my utility classes, and I have a small config file that generates color classes for the theme, and that’s it. The power it gives you with for loops and mixins and whatnot make it incredibly easy to automate all the repetitive things. Still, tailwind is nice because it’s so popular that everyone will know the class names, but if you can’t use tailwind at work like me and you only have css or sass then sass it is. I essentially ended up making my own little version of tailwind.

Second this. Sass is basically the typescript for css. All its features will eventually make it into the core spec. All css frameworks are marked for depreciation for me from the get-go. We're basically on the cusp of another bootstrap age, where everything looks the same....once again some more. Cause lets face it websites already do, save for the color scheme and some graphics used.

@@Sindoku yeah I think that's the right approach. Where I work we are slowly switching to Tailwind for projects, but have used SASS for last few years and (S)CSS Modules just so that we get scoped classes so that we have to think less about naming things. We stuck close to vanilla CSS and that worked great for us. css in js libraries appeared and died and are now frowned upon, but that didn't impact us and projects we have worked on because we didn't use any of those. There are couple of downsides to doing this utility approach with sass for example if you have to generate all utility classes for each breakpoint you end up with an enormous CSS file in the end, but overall it's a good experience. I like the fact that valid CSS is valid in SASS. It doesn't reinvent CSS syntax, but rather adds some superpowers to it. This is why I like Tailwind. It's all CSS classes in the end and I do like the fact that Tailwind generates only classes that you use so CSS file size doesn't increase like crazy.

Uh... every JS tool we use today are exactly relying on preprocessing since the very early days of JS. Babel, bundlers, TypeScript, CSS Modules, Tailwind, ESLint, lingui... I could go on. What tools are you referring to that people rely on too much that doesn't do any form of preprocessing?

@@dealloc I am trying to outline the issue with JS that are failed to be fixed with most preprocessor. It feels like the loopholes are just being replaced. ReScript is probably the only language that aims to really fix JS.

Good point, they're the same. But only because of the merging style issue of Tailwind, I think Panda is a winner here, like having different behaviour based on the order of the class is awful, and possibly hard to debug.

That's because he hate Chakra UI team. Because for some reason the creator of TW hates deeply Chakra without a reason, saying things like the Chakra team copy some text of the TW docs. WDF, are TW not a Open Source proyect?

if you hate typing characters, why are you a programmer lmao

Bro doesn't know IDE types that for you when you press Ctrl+space or tab.

@@smthngsmthngsmthngdarkside if you love characters, why aren't you a book author?

I think you missed my point@@smthngsmthngsmthngdarkside

Seems more like a square wave.

Panda is more of a low lever library. It's amazing, but unless you are building your own component libraries, the best DX comes once you start using one of the ready-made component libraries based on Panda. Like Ark-ui or park-ui

4:54

@@andrewk2756 Still not the same. Ark and park-ui auto generates all the possible components for you so you don't need to do any of this. I just run 3 commands on a new project and have a full component library with any possible building blocks and common elements (Button, Input, Select, Tabs, Link, Heading, Flex, Hstack, Vstack, Grid, etc, etc)

@@YuriPetusko Well I was replying to your original comment about attributes and that's exactly on the timestamp. You said it yourself Ark and Park UI do this stuff so it's not really a Panda's thing? I'm curious to check it btw now that you mentioned.

@@andrewk2756 Panda is a low level and framework agnostic. Where it shines the most is the component library built on top of it. Ark is the official one by Panda team, if you try it, make sure to try JSX components, it's much more pleasant to work with them and style them with attributes rather than classes (when it's compiled, panda turns them into atomic classes anyway). Park-ui is extra layer on top of Ark that adds opinionated pre-themed component for any use case like forms, sliders, tabs, containers, buttons etc. they have a cli command in getting started docs that will just generate all of them and put them in your folder for easy importing

Tailwind is indeed amazing and I use it for a handful or projects, but it's not suitable for all use cases. We're using Panda CSS for some larger projects where what we need to achieve is more difficult with Tailwind. "reinventing the wheel at this point" - is that not what the Tailwind team have done? They've add classes that apply CSS styles, I seem to recall we could do that around Dec 17th, 1996 when W3C published the first standard for CSS (level 1)!

@@Shad0wL00p What can you NOT do with tailwind????? (or its "difficult")

@@upsxace Well some of it had to do with CSS variables that has been sort of resolved with version 3. The short answer is that we have a a bunch of UI's all built with a base theme; the UI's are "shared" between multiple clients and those clients have their own "branding", therefore we need to override bit s in the base theme to achieve their look and feel; we do NOT want to have all our themes defined in the same place as base, out client theme overrides are in separate repos being published separated and loaded at runtime. The issues we had were more around overriding CSS variables. It's more of a global vs scoped CSS variable issue, with Panda we can achieve what we need/want very easily, with Tailwind it seems to be a faff and gets into a bit mess. It may be that its possible to achieve what we needed, but we've already moved on and now we have type safety for our styles and clean and clear way for our engineers to build the component styles etc. I love Tailwind and I use it in several other smaller projects, but the short of it is that Tailwind has been perfect for smaller tailored applications, but an absolute nightmare for enterprise applications with many many themes etc.

@@upsxace You know what, given it's been a while since I looked at Tailwind and they have CSS var support in v3...I went back to try it again and found that I can actually achieve what I need to achieve now; for theme overrides (css vars) I used typescript types to define some css variables as a nested structure that I generate the css vars from; there is also a plugin you can use to put variables in under "variables" within the theme of the config too; using the typescript types gives us that type safety around the overrides to ensure that variable names are correct and not mistyped etc. Honestly, dare I say it, we may switch to Tailwind CSS again and abandon Panda CSS; not because there is anything wrong with Panda and it's pretty good, but Tailwind would be a better fit for us based on what we need to do, given that I can now do what we need and couldn't before. 😅

Could you expand more on this?

I think it's about convenience. I used CSS Modules for last 4-5 years I think and started using Tailwind about 6 months ago and would never want to go back to CSS Modules. The fact that I can just write classes and not worry about creating, importing and using extra files is nice. It's especially nice in those cases where you just have to add some margin/padding to a single element or just do some flex stuff to center it maybe. So instead of creating a css module file, creating a class and then importing and using it for that potentially one off thing, I can just write few classes and be done with it. And you can also have all those classes triggered on certain breakpoints if you need. One other benefit is that if someone joins a project and they used Tailwind, they don't have to decypher your custom styles, they can just use Tailwind. Regarding css in js in general, I think that's horrible and think that was a mistake really for the most part lol

tell us you dont work in big teams or designs systems without telling us you're a noob

@@smthngsmthngsmthngdarkside lol. Can you elaborate on why one might need type safe CSS? Do it with a straight face.

@@adamjones7497 you don't need it, the same way you don't need type safe anything except code for super critical infrastructure maybe. Type safety in CSS is more about peace of mind and ease of work. I don't like these css in js libraries at all, but having type safety when working with design tokens is pretty nice really.

@@rand0mtv660 adding a layer of complexity to solve for a problem that doesn’t necessarily exist doesn’t give me peace of mind. - In terms of CSS specifically why not add audits in CI/CD instead of adding complexity to the implementation?

@@adamjones7497 what audits would you add? Why push that feedback that something is wrong into CI if developers can get it immediately inside their code editor? Don't get me wrong, I dislike css in js solutions in general, but I cannot deny getting that autocomplete inside the editor and type safety is a nice perk while working with them. It's not something you really "need", but it's a nice feature.

I feel the same way but I’m trying to make myself think ”maybe I’m just stuck in an old mindset”. Kinsa arbitrary we often care about serverside validation and safefty…but when it comes to html templates or css - we don’t care. Even though a css flex mistake could make the site unreadable when new ideas come along to suggest improved validation I feel like saying ”I’ve built sites for 15 years and never needed it” But it feels like old assembly pros saying ”written asm for 15 years and never needed a high level language” 😅 or ”never needed eslint” Most things are initially not strictly NEEDED but sometimes over time provide a small value

I don't know, i think that was a mistake from the blog author. If i remember right, the correct and only valid way in PandaCSS is doing "_lg"

@@oscarljimenez5717 I think a better example would have been using something like: `padding: { base: 4, md: 6, lg: 12 }`

No, you only use what you need. They give you all posible solution for different teams and problems. But you should always use the basic instead of learning all. For example, with the CSS prop and CVA you could do 99% of cases.

if you have this problem, why are you a programmer lmao?

Your team will get used to it. When you use tailwind, you get better at reading tailwind. I'm tired of this excuse that working on teams somehow justifies unnecessary verbosity.

​@@TheBswanbased. Thank god

hi

@@TheBswan hi

hi

hi

Hi there, Hello!

Eww dude

Just STOP stupid comments. Do you believe inline styles also exhibit pseudo selectors and atomic characteristics?