One of the reasons tailwind is so good is because you don't have to think of a a classname, but using styled components like this just reintroduces that problem. Rest of the video is great, although I am surprised u didn't mention flowbite or headless UI
@@dokgu he still had to create a name for the div with all its styles and use that below in the return jsx. It might become confusing when ur using styled components alongside regular components, just my opinion tho
Keep doing these micro-learning walkthroughs instead of one large project tutorial. This way it gives most developers to digest easier and quicker and less likely to fall into the trap of Tutorial Hell. Keep going brother, you got more and more subscribers now, keep going on giving us more and more micro-learning practical concepts🏆
A better Tailwind Documentation VS Code extension is by a dev named 'alfredbirk'. This opens the docs side-by-side with your files in the editor browser, without launching another browser window Very handy 👍🏻
How do you use hex color coming from api as color for any element in talwind css? I tried using arbitrary value technique but doesn't seem working. Please help
I am just a beginner in Web Development but can somebody explain to me why would I copy someone's pre-made code, aren't I supposed to be able to write it myself? Talking about the last section of the video
It's good to know how to do things on your own, especially at the start. But if theres a premade component, or a design available its more valuable to use it and save the extra time. You should for sure know what you're copying, how it works and why. But at a later point saving time and stress is better.
I believe it does it automatically in VS Code for CSS. If you're using tailwind and it's not working try using Tailwind CSS IntelliSense. It might enable it but I can't remember, Color Highlight is nice as well.
this really awsome,If you can please teach us how to use Tailwind and MUI together, bcz there are no proper advanced components library for tailwindcss
Maybe it is because i never used it, but tailwind seems as much code to me as just using the style="" on each element, and to then grouping them up and giving it a name makes me wonder if its not better to just use plain css
If you’re building a big project it is 100x faster when you get familiar with the names. The style=“” method eventually can get very long when you have a class with a lot of attributes, so tailwind cuts it in half.
Great review, I've been fighting exactly with these huge className lines. I'll defiantly use the Twin Macro approach but probably want to move them into a separate style file for the component.
This is plain ridiculous… you “ditch” CSS in favour of tailwind to avoid using class names. Then again you reintroduce the naming issue by creating styled components but with tailwind syntax. Really why all the hassle to use tailwind at first place. Use styled components or CSS modules. All those years have passed but I fail to see the reasoning behind tailwind. One can argue that makes more harm than good.
I'm sorry but this tool makes no sense. Entire point of tailwind is to use class names inline so that your css isn't tightly coupled to your html and vice versa, and so you don't need to name things etc. - author of tailwind made very good blog about thought process behind why tailwind is made in first place. If you don't like this approach then that means tailwind is not correct tool for you, and should perhaps just use basic css/scss instead with BEM syntax
Twin macro just look redundant as you can do these things inside the tailwind css file using apply clauses. Just another developer complaining about tailwind how difficult it is to read and ugly. Just stop using it and go back to css and leave tailwind for the rest of us that appreciate something that is actually easy to learn, understand and use.
One of the reasons tailwind is so good is because you don't have to think of a a classname, but using styled components like this just reintroduces that problem. Rest of the video is great, although I am surprised u didn't mention flowbite or headless UI
@@dokgu he still had to create a name for the div with all its styles and use that below in the return jsx. It might become confusing when ur using styled components alongside regular components, just my opinion tho
yeah it's such a problem to come up with a classname, especially when using css modules :)
but you got to admit, all those utility classes in the jsx is just Ugly!
@@youneshenni5417 yeh ik they are ugly but honestly I don't care, it makes developing and debugging easier and thats all that matter to me
Looks > Usability?
Keep doing these micro-learning walkthroughs instead of one large project tutorial. This way it gives most developers to digest easier and quicker and less likely to fall into the trap of Tutorial Hell. Keep going brother, you got more and more subscribers now, keep going on giving us more and more micro-learning practical concepts🏆
incredible stuff gentleman, I really enjoyed your recommendations! thanks a lot
totally insane, so much info in a 10 min video!!
headlessui is another important part of the tailwind ecosystem that one can not miss. Also, the free (not all) components from tailwindui.
Why? What does it do?
How can I watch the milimeters in each x and y border ?
Extremely Helpful! Thanks alot, it rlly helped me 💙
A better Tailwind Documentation VS Code extension is by a dev named 'alfredbirk'. This opens the docs side-by-side with your files in the editor browser, without launching another browser window Very handy 👍🏻
This is legit the best tailwindcss video I have watched in a while. You have no idea how helpful these are. Thank you!!!!
`@apply` is very powerful too. Thank you for the great content
love this, its amazing tools, thanks man
04:41 is a extension on vscode? bg- showing all available tailwind classes
Super useful! Thanks ❤
You got my subscription… and so much admiration!
Please I need moreeeee!
If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ...😉
If you ever had to code a Paint clone for the web, what would your tech stack look like, what frameworks would you use?
at this point I'd use Next.js and Tailwind for literally everything. Might wanna look into the T3 stack. Cheers mate.
You are the best. Thanks for sharing!!!
I haven't been able to get Twin to work with Jsx like SolidJS.
does Twin.macro works together with headwind extension?
I wonder if this is way you are doing will effect SEO
nice video!
Whats the theme name?
try Halcyon
How do you use hex color coming from api as color for any element in talwind css? I tried using arbitrary value technique but doesn't seem working. Please help
Your video is always next level..
What a banger.
Twin.macro? Isn't Tailwind's one of PROS not to use css in js thus increasing productivity by adding small util classes in html ?
Wonderful, really appreciate
I am just a beginner in Web Development but can somebody explain to me why would I copy someone's pre-made code, aren't I supposed to be able to write it myself? Talking about the last section of the video
It's good to know how to do things on your own, especially at the start. But if theres a premade component, or a design available its more valuable to use it and save the extra time. You should for sure know what you're copying, how it works and why. But at a later point saving time and stress is better.
doesn't twin defeat the purpose of using tailwindcss?
What does euse mean? u keep saying euse
Hi can you do a vedio about styling when you have aloooot of pages and design system and stuff like design system rah wajd khs brk timplimentkh b css
How can I have the colors showing up directly on the editor like you have? Great video as always!
I believe it does it automatically in VS Code for CSS. If you're using tailwind and it's not working try using Tailwind CSS IntelliSense. It might enable it but I can't remember, Color Highlight is nice as well.
extension called Color Highlight
Thanks man
Dude. You said "don't worry links will be in the description." ..😢?
this really awsome,If you can please teach us how to use Tailwind and MUI together, bcz there are no proper advanced components library for tailwindcss
daisyui?
you have to ask why tailwind if you just use style-components
bro where is cva and twmerge
When you have 3 consecutive div thatn have 3 different set of tailwind utilities is indeed hard to figure out.
Maybe it is because i never used it, but tailwind seems as much code to me as just using the style="" on each element, and to then grouping them up and giving it a name makes me wonder if its not better to just use plain css
If you’re building a big project it is 100x faster when you get familiar with the names. The style=“” method eventually can get very long when you have a class with a lot of attributes, so tailwind cuts it in half.
I think if your not somewhat fluent with building layouts, then tailwind is not something to use yet.
Great review, I've been fighting exactly with these huge className lines. I'll defiantly use the Twin Macro approach but probably want to move them into a separate style file for the component.
if you have to name a component or name class, just use styled-component with scss, tailwind in these cases is totally not nessesary
Well, I can live without those.
I can live without Tailwind, to begin with
@@aram5642 savage!
Install extension known as "tailwindcss intellisense"
This is plain ridiculous… you “ditch” CSS in favour of tailwind to avoid using class names.
Then again you reintroduce the naming issue by creating styled components but with tailwind syntax.
Really why all the hassle to use tailwind at first place. Use styled components or CSS modules.
All those years have passed but I fail to see the reasoning behind tailwind.
One can argue that makes more harm than good.
tailwind is just a mess
Not sure this makes sense.
Too much code, no single example.
I'm sorry but this tool makes no sense. Entire point of tailwind is to use class names inline so that your css isn't tightly coupled to your html and vice versa, and so you don't need to name things etc. - author of tailwind made very good blog about thought process behind why tailwind is made in first place.
If you don't like this approach then that means tailwind is not correct tool for you, and should perhaps just use basic css/scss instead with BEM syntax
Twin macro just look redundant as you can do these things inside the tailwind css file using apply clauses. Just another developer complaining about tailwind how difficult it is to read and ugly. Just stop using it and go back to css and leave tailwind for the rest of us that appreciate something that is actually easy to learn, understand and use.
lol. styled components suck