Panda CSS - Should It Replace Tailwind With Vue?
Vložit
- čas přidán 27. 07. 2024
- CSS/ Vue / Career Mentoring 👉 mentors.to/erik
Panda CSS is a hot new CSS library that uses CSS in JS. But should you use it with Vue.js? Is it a Tailwind replacement? Let's take a look!
👉 Check out my last video on Vue props with TypeScript
• A Better Way To Create...
👉Sign up for my mailing list and get neat stuff!
bit.ly/3Umk7sW
👉 Need some help with a project, level up your skills, React, Next, Vue, or Nuxt? Check out my 1-on-1 mentoring!
mentors.to/erik
Links:
panda-css.com/docs/installati...
newsletter.baptiste.devessier...
0:00 Panda CSS what is it?
01:37 Nuxt Guide Install
02:24 Folder structure
03:12 Adding in CSS panda styles
05:20 Comparison to Tailwind CSS
06:30 Merging classes Tailwind vs Panda CSS
07:52 A look at patterns
09:20 Using design tokens
10:50 The verdict analysis
nah I can't see myself using this def gonna stick to tailwind or scss.
I have the same reaction to this as I did to StyleX. Short answer: No. This is not the way. Long answer: I'm not a frontend dev, but I don't think that CSS needs types. You can write completely incorrect css and your website will still work. The problem that people have with CSS is usually some unexpected behavior with something like padding or margin for example, or something else. Adding types will not solve any of that.
Also: you mentioning that you like that each class is on a separate line. If you wanted to you could do that with tailwind as well. It's just about how you style your html. You also mentioned that you can easily see what each class does. I have never looked at a tailwind class and not be able to tell what it does.
Also, the token system you demonstrated where you added your own primary and secondary colors. Tailwind can do that too.
I also forgot to mention the most important thing that I disliked about styleX vs tailwind. Both PandaCSS and Stylex are Javascript framework only it seems, as where Tailwind works in other frameworks and programming languages as well.
Your second paragraph is wrong. If you have 15 tailwind classes on a button why would I want to put them on different lines?
@@neneodonkor It is a subjective opinion. He said that having each class on a separate line makes it more readable. For me it doesn't matter if they are all on one line or if they are on separate lines. I was merely stating that if he wanted to, he could also achieve the same "readability" by putting each css class of an element on a separate line.
Where in my 2nd paragraph am I wrong though?
I haven't seen you in forever, I left the channel when you said you were going to take a break from Vue. Glad to see you back. :)
Thanks! I’m switching up the content , with non Vue and Vue content
Looks interesting
Thank you, Erik. Good title, honest opinion.
I think the performance will also be bad with PandaCSS.
In my opinion it's a nice try but Tailwind or UnoCSS is still a better way to go
Just because you CAN do it doesn't mean you SHOULD do it.
💪
I see Adam Wathan creating something similar if it gets popular.
He already did Taliwind :)
Without tailwind or Unocss, I would rather use css v-bind than any other css-in-js library.
I don't think it's a good choice since vue has SFC. 🤔
partially true. Panda is better in a sense that you can more easily style your components from outside since you can pass styles around and get them merged with no need for class naming. Whether you should mutate your components CSS from the outside is another story
@@Andrey-il8rh I use cva with tailwind when I need style my components outside like creating variants for base components. I really don't want to write css-like props in js/ts. 😂
@@Jimmy_zm what is cva?
@@Jimmy_zm You can use the tailWind shorthands PandaCSS offers if you don't want to write vanilla like CSS.
Inline styles making a comeback, but bloated with js wrapper?
It seems like unocss
it has nothing to do with UnoCSS
Tailwind is so simple and doesn't involve js/ts. I find all css-through-js solutions hideous now.
CSS-in-JS это большая ошибка, Tailwind это вообще недоразумение, типа, CoffeeScript - это всё должно умереть, нужен только SCSS + BEM и всё.
похоже кто то застрял в 2012 году. Привет из будущего, никому не нужен твой SCSS + BEM
I had been really skeptical of Tailwind but it is actually the best thing in CSS for a while. Panda seems like a real backward step. Really awkward verbose syntax. Why?
There's Tailwind shorthands in PandaCSS. PandaCSS gives you the flexibility to be casual and simple like TailWind if you wanted too, OR if you want to be a CSS styling heavy project then there are different syntax methods you can implement too. With TailWind, you only have one approach, which works good.
The creator of the video definitely didn't explore everything PandaCSS has. So this video can be misleading due to the title. This video title should be more accurate, like "Exploring PandaCSS".
but thats just css mate
Pleasee stop everything try to put shitty kind of css into the code ….
no way i'm saying this in 2024 wtf
In my opinion this is not an ideal solution and is even worse than tailwind
haha, ok, can you suggest good alternatives?
Panda is just Type-Safe Tailwind without the need for an editor plugin pretty much.
@@kodekorp2064 I don't think it looks anyway close to Tailwind
@@Andrey-il8rh It doesn’t, but if you wanted to there are shorthands. I still prefer tailwind but, its there.