Hi! I started from plain CSS and Styled Components, later switched to Material UI, and it really saves a lot of time. Really love their flex-containers, input components, clear examples in documentation, including Typescript. MUI is fully customizable via global theming and style overrides, so your components don't have to look like you took them from a library! Nevertheless, I am currently using Styled Components for a landing page with not much logic, but a lot of custom styling 😊
Tailwind is incredible! It's so efficient, and vscode is super helpful when you can't remember exactly how to write something. Just write the first letter and hit Ctrl+space. Also, a pro tip is that you can use the @apply directive to make reusable classes for things like buttons and inputs. This keeps your code DRY, and you can still put custom classes on top of it. (Or specialize things to certain modules)
Thanks bro a lot, I learnt a lot from your channel. Now I got 5 job offers in my hand with 3x salary and your tutorials really helped me to get there ❤️👍
Am jealous....i would lik to get yo pick your brain on your journey ma gee... currently done learning react...just building projects and adding tailwind to the mix...any advice on how to fast track this stuff quicker😭😭
Thank you for this content! Although the information is pretty in depth, the way you explain it resonates very well with how my brain works and understands stuff. Gonna spend some good time on this channel. Keep up the good work!
Love you brother. Im starting your react course. I have watched even previously your great react videos and they are great. keep working and pushing hard for yourself and for us. hugs.
Thank you for your opinions. I tried to use MUI because it seems like MUI is most used for react project, but for me it was kind of difficult to use it so I shifted to Bootstrap (not react-bootstrap). It's because I want to use CSS itself as well to style some components in bulk.
I hate style libraries. It's fine if you're using an off-the-shelf component that's giving you a ton of functionality. But ultimately if you're a professional front-end developer working on any significant web app, your designer is going to hand you very custom design comps and you're going to fight an uphill battle working from a baseline defined by a style library rather than just - well - doing your job as a front-end developer and building your own style library for the project. Architect your CSS with as much care as you architect your JavaScript. I also do not understand why for nearly a decade now people have been fighting CSS by reengineering it in JavaScript. It's 2022 and CSS has multitudes of ways to accomplish most every styling need that arises. I find reading through JavaScript code that generates dynamic styles to be pure drudgery whereas well-formed CSS can be read in seconds. Less important, but from a personal aesthetic viewpoint, the CSS "code" that "CSS in JavaScript" generally generates I find to be abhorrent to look at. So many inline styles. So many unnecessarily non-semantic classes. Unnecessary levels of specificity. When I code React apps and style them, I want someone to be able to view source on the page and think it was literally written as a static website by a human, rather than dynamically generated. This of course has nothing to do with functionality but in my view it is a way to hold ourselves accountable, to create something beautiful that doesn't merely work. EDIT: Maybe I was a bit one-sided so here are a few caveats. Examples: dynamically resized elements like windows or table columns; cases where things like colors might be generated on the fly, like user-input styles; edge cases where the UI won't know how to display until render cycle / just in time. But at the same time this I'd use this to illustrate my point. If the CSS is well-formed then overrides will be minimal and require little thought after-the-fact. The worst thing is looking in your dev toolbar and seeing an HTML element that has been overridden 10+ times with a mix of classes and styles from a UI library, or from React, or from whatever poorly architected CSS the last developer wrote.
Hi! Big fan of your work. I follow your tutorials religiously. Great job! Hope you don't mind me asking this, but in React, why do you explicitly keep importing to the individual components, if you've already imported them in your ?
I don't really understand why tailwind is efficient. You have to put class name on every html element even if you want the same CSS for many html element whereas with CSS vanilla or Sass you just write once the CSS for a lot of elements in the same time.
After a few weeks of getting used to it, now it is literally almost mind-blowing amazing to use. You will naturally remember all the styles depending on how much work you put into your projects, and will never have to import or create a CSS file again. Also you have to install the Tailwind intellesense package otherwise there are barely any benefits lol.
It makes your file structure cleaner eventually. I would say tailwind is good if you already know/are somewhat proficient with writing css. If you are still practicing the fundamentals it won’t be efficient because you won’t know what your looking for, but once you get the hang of it you end up using the same attributes over and over again
After some practice & using plugins like tw-merge you can DRY out a lot of repeated code in tailwind, also copy-pasting is a valid option. Even the tailwind docs recommend copy pasting when you have 4 identical elements back to back & then using your editor's multi cursor or multi edit features to edit them at once. I dont second this since I dont like looking at repeated code, it looks unclean. But yeah its actually suprising how fast it is, I used tailwind for all freelance projects & while using css modules for a nextjs side project its a lot slower especially when making the site responsive
Thanks for the video Pedro, I would like to ask, for a self taught that would like to land a job as a front-end developer , wouldn't it be better to style react projects with just css or css modules or sass or a combination of them coz different companies use different ways to style their projects coz you may end up learning material UI but not using it later in the job.
If you can use modules and sass you definitely can use vanilla css. And actually all these style libraries work similar and you don’t need much time to understand how to work with them. I mean MUI, Chakra UI, Ant Design... Just make one project using Modules, one with Style Components, and one with MUI. And you will be ready for a test task. And yes, we constantly learning stuff that we don't use. But it still really helpful.
@@alexandershcheglov4653 Yes u are right! and I have actually made 3 mini projects with just css module and sass and gotta say the most annoying part is the media queries lol. Might try style components soon. I was asking coz there might be some beginners that might skip CSS and just jump into Bootstrap/Material UI without learning some basic css
Whats up Pedro, do you think you need a CS degree to get a job right now? Or you think its possible with just the skills needed, and if so I was wondering if you can give tips on getting entry level jobs.
I got a remote job since 2021 right after studied in field MERN stack for 13 months. I don’t have a degree. I have built over 50+ projects and showed my best 3 to them. That’s all.
@@PedroTechnologies Oh I thought you got hired as an intern and then they brought you on because you are a god and you will graduate very soon with a math degree, some related field is all that matters i meant to ask.
I use a component library and Tailwind together. Tailwind is a blessing for me as I just memorize all the classes and I can just list classes to make stuff happen. This is such a time saver.
This wouldnt make a lot of sense hahaha like, you can have some parts of ur app using tailwind and some using styled components. But, that would be just confusing so i wouldn't recommend
But Tailwind don't provide pre made components... What if we want pre made components along with Tailwind? Is it perfect to use Material UI & Tailwind both at same time? @@PedroTechnologies
Hi!
I started from plain CSS and Styled Components, later switched to Material UI, and it really saves a lot of time.
Really love their flex-containers, input components, clear examples in documentation, including Typescript.
MUI is fully customizable via global theming and style overrides, so your components don't have to look like you took them from a library!
Nevertheless, I am currently using Styled Components for a landing page with not much logic, but a lot of custom styling 😊
iamveryhappyforyou
Tailwind is amazing its insane you should give it a try
@@eshw23 yes it definitely looks worth trying out
Tailwind is incredible! It's so efficient, and vscode is super helpful when you can't remember exactly how to write something. Just write the first letter and hit Ctrl+space.
Also, a pro tip is that you can use the @apply directive to make reusable classes for things like buttons and inputs. This keeps your code DRY, and you can still put custom classes on top of it. (Or specialize things to certain modules)
Tailwind is superior if you already know CSS, super fast
ong frfr
I love tailwind it is insane
YESS
Tailwind ❤
Yesterday I saw theo's video, now I saw yours. I need to learn this.
Hahaha he spend like 20 mins explaining to me why tailwind is the better choice. Its actually way more efficient then I thought
Thanks bro a lot, I learnt a lot from your channel. Now I got 5 job offers in my hand with 3x salary and your tutorials really helped me to get there ❤️👍
Damn 🤯 CONGRATS!
Am jealous....i would lik to get yo pick your brain on your journey ma gee... currently done learning react...just building projects and adding tailwind to the mix...any advice on how to fast track this stuff quicker😭😭
Bro congratulations
golden knowledge Pedro! Thanks for sharing!
im using tailwind css , its pretty good
please make a series
on advance react
Thank you for this content! Although the information is pretty in depth, the way you explain it resonates very well with how my brain works and understands stuff. Gonna spend some good time on this channel. Keep up the good work!
Love you brother. Im starting your react course. I have watched even previously your great react videos and they are great. keep working and pushing hard for yourself and for us. hugs.
❤️❤️❤️
always good video!
Thank you for your opinions. I tried to use MUI because it seems like MUI is most used for react project, but for me it was kind of difficult to use it so I shifted to Bootstrap (not react-bootstrap). It's because I want to use CSS itself as well to style some components in bulk.
I hate style libraries. It's fine if you're using an off-the-shelf component that's giving you a ton of functionality. But ultimately if you're a professional front-end developer working on any significant web app, your designer is going to hand you very custom design comps and you're going to fight an uphill battle working from a baseline defined by a style library rather than just - well - doing your job as a front-end developer and building your own style library for the project. Architect your CSS with as much care as you architect your JavaScript. I also do not understand why for nearly a decade now people have been fighting CSS by reengineering it in JavaScript. It's 2022 and CSS has multitudes of ways to accomplish most every styling need that arises. I find reading through JavaScript code that generates dynamic styles to be pure drudgery whereas well-formed CSS can be read in seconds. Less important, but from a personal aesthetic viewpoint, the CSS "code" that "CSS in JavaScript" generally generates I find to be abhorrent to look at. So many inline styles. So many unnecessarily non-semantic classes. Unnecessary levels of specificity. When I code React apps and style them, I want someone to be able to view source on the page and think it was literally written as a static website by a human, rather than dynamically generated. This of course has nothing to do with functionality but in my view it is a way to hold ourselves accountable, to create something beautiful that doesn't merely work.
EDIT: Maybe I was a bit one-sided so here are a few caveats. Examples: dynamically resized elements like windows or table columns; cases where things like colors might be generated on the fly, like user-input styles; edge cases where the UI won't know how to display until render cycle / just in time. But at the same time this I'd use this to illustrate my point. If the CSS is well-formed then overrides will be minimal and require little thought after-the-fact. The worst thing is looking in your dev toolbar and seeing an HTML element that has been overridden 10+ times with a mix of classes and styles from a UI library, or from React, or from whatever poorly architected CSS the last developer wrote.
Thank you Pedro for your continuous content's ❤️
always learning something new from you
Fala Pedrinho!
Valeu por mais esse excelente conteúdo.
Hi! Big fan of your work. I follow your tutorials religiously. Great job! Hope you don't mind me asking this, but in React, why do you explicitly keep importing to the individual components, if you've already imported them in your ?
Ima download it thanks for sharing!!
Worked , thanks a lot!
I don't really understand why tailwind is efficient. You have to put class name on every html element even if you want the same CSS for many html element whereas with CSS vanilla or Sass you just write once the CSS for a lot of elements in the same time.
It ends up being more efficient, not to mention u basically dont have to have css files to spend time with. Also, it has autocomplete
@@PedroTechnologies I'm going to test it then 😊
After a few weeks of getting used to it, now it is literally almost mind-blowing amazing to use. You will naturally remember all the styles depending on how much work you put into your projects, and will never have to import or create a CSS file again. Also you have to install the Tailwind intellesense package otherwise there are barely any benefits lol.
It makes your file structure cleaner eventually. I would say tailwind is good if you already know/are somewhat proficient with writing css. If you are still practicing the fundamentals it won’t be efficient because you won’t know what your looking for, but once you get the hang of it you end up using the same attributes over and over again
After some practice & using plugins like tw-merge you can DRY out a lot of repeated code in tailwind, also copy-pasting is a valid option. Even the tailwind docs recommend copy pasting when you have 4 identical elements back to back & then using your editor's multi cursor or multi edit features to edit them at once. I dont second this since I dont like looking at repeated code, it looks unclean.
But yeah its actually suprising how fast it is, I used tailwind for all freelance projects & while using css modules for a nextjs side project its a lot slower especially when making the site responsive
Man, you know u look super cute. I hope this compliment reaches you.. because it's always fun watching ur vidz... I learn a lot from them!!
Lmaoo glad u liked the vid!!
Why looking soo good, it's hard to focus anyways thank you! Im on beginner to intermediate level so it's really helpful.
Hahaha thank you!! Glad u liked the video!
hair looking cool af
good content! thank u brother
Yooo, love ur videos.
100k soon 😍
Can't wait :)
Thanks for the video Pedro, I would like to ask, for a self taught that would like to land a job as a front-end developer , wouldn't it be better to style react projects with just css or css modules or sass or a combination of them coz different companies use different ways to style their projects coz you may end up learning material UI but not using it later in the job.
If you can use modules and sass you definitely can use vanilla css. And actually all these style libraries work similar and you don’t need much time to understand how to work with them. I mean MUI, Chakra UI, Ant Design... Just make one project using Modules, one with Style Components, and one with MUI. And you will be ready for a test task. And yes, we constantly learning stuff that we don't use. But it still really helpful.
@@alexandershcheglov4653 Yes u are right! and I have actually made 3 mini projects with just css module and sass and gotta say the most annoying part is the media queries lol. Might try style components soon. I was asking coz there might be some beginners that might skip CSS and just jump into Bootstrap/Material UI without learning some basic css
Would it be possible to do a course on using Tailwind within React? Thank you!
Thanks bro we need you to help us tailwind with react course please
Whats up Pedro, do you think you need a CS degree to get a job right now? Or you think its possible with just the skills needed, and if so I was wondering if you can give tips on getting entry level jobs.
I got a remote job since 2021 right after studied in field MERN stack for 13 months. I don’t have a degree. I have built over 50+ projects and showed my best 3 to them. That’s all.
I work for Twitch and i dont have a CS degree hahaha
@@PedroTechnologies Oh I thought you got hired as an intern and then they brought you on because you are a god and you will graduate very soon with a math degree, some related field is all that matters i meant to ask.
@@PedroTechnologies That's is amazing, I wish you best in your future life.
I use a component library and Tailwind together. Tailwind is a blessing for me as I just memorize all the classes and I can just list classes to make stuff happen. This is such a time saver.
Can we combine tailwind Css with style components?
This wouldnt make a lot of sense hahaha like, you can have some parts of ur app using tailwind and some using styled components. But, that would be just confusing so i wouldn't recommend
But Tailwind don't provide pre made components... What if we want pre made components along with Tailwind? Is it perfect to use Material UI & Tailwind both at same time? @@PedroTechnologies
So everybody use libraries... I was always struggling with my own writing css like a fool ))) What I should try first 🤔
please make a serious about css responsive layouts, mobile first (by building a dashboard or landing page). please bro. thanks
I use mantine + tailwind
Using MUI for Verizon.
♥♥♥
Hey pedro nice video could you please make a video on freelancing
Hey bro I like your style can you share some style tips vlogs please
full next js series like react
Use styled components and lay back!
React-boostrap vs tailwind css
bro did not mention SCSS 💀💀
I will never understand why developers are so averse to writing their own css.
sass is king, sorry
Its good too!!