GPT: "Very informative tutorial! Extracting reusable components is such an important aspect of web development, and your explanation made it easy to understand. Tailwind CSS v2.0 seems like a powerful tool, and I appreciate your step-by-step guidance. Looking forward to more tutorials in this series! 👏💻"
@@simonswiss working with Tailwind+Astro feels like we've entered a whole new world of web-dev: comfortable, intuitive DX delivering blazingly-fast UX. Astro's island approach helps us reduce to an absolute minimum the JS shipped when and if the client needs it, Tailwind's utility classes and purge feature drastically shrinks the CSS bundle shipped🤸♀
i think you should explain it from scratch on how to use react in this tutorial, because not 100% of your viewers are react js user but it's still good that you have tell us what you added and changed in this tutorial
Didn't expect to learn something about software architecture, but here I am. Thank you so much for these tutorials! Simon is such a likable guy, I wish he could voice all the dev tutorials I watch, lol :D
This video is actually more about React than Tailwind. The fact that it helps to reduce the duplication of Tailwind's utilities classes is only incidental to React's component architecture.
Yep, the morale of the story is that making the abstraction at the "component" level (the markup) is a great solution. React, PHP, Astro, Vue, Blazor, Twig, Handlebars... anything will do! The essence of the message here is that doing the abstraction at the CSS level doesn't eliminate all the duplication - you still need to re-create the markup multiple times.
also @iamthekingofchoco I've followed @DaveGrayTeachesCode 's React JS tutorial and deployed an actual website thanks to it since then, it's really good (It's been a year but maybe others will read this ! :D)
But what if your UserProfile card looks (almost) exactly like Destination card? Do you then copy and paste all the markup in these 2 components? How do you avoid duplication in that case?
I believe yes, but it highly depends, on whether those components will remain similar as design will develop. In case you'd like to have it at one place, you could just have a Card component, which is then contained by concrete UseProfileCard and DestinationCard :)
You need to make a video about things that are not yet possible to do in tailwind, but we can do something like a "hack" to achieve the same result. For example, things like gradient border colors or space-{}-{} but for padding instead of margin
When you say "cant do in tailwind" do you mean things that do not come pre-installed with it? Everything you can do in CSS you can do with tailwind, you just have to set the configuration up for it if it does not come out the box :)
Thanks for this great video, I indeed planned to use Tailwind with React, perfect for me. Nevertheless, I'd at least rename this video to something like "06: Extracting Reusable Components with React" or so. Since it's indeed very React-ish. Nothing for guys who want to stick to vanilla JS or Vue or so.
I don't think he went too far with React in this video, I know Vue and understood the video main idea - how refactoring TailwindCSS is more about extracting a component in your framework instead of OCDing with duplication of a string of utility classes - just the same.
Hi my friend and thx for the video and your passion. Can you set the color from your brace from red to some other color. Its hard to see and understand this for the properties in the loop. Thx
It's a good intro series, but i would keep it Tailwind only. Going to React, Vue and other frameworks might not be what people want to do, especially when expecting Tailwind demo.
Thanks for the feedback! What do you think would be the best way to show people how to extract reusable template partials without using any other tooling? We're trying to make things as realistic as possible and reflect how people use Tailwind in real projects, so something like React felt like the right choice since extracting reusable templates is a huge part of the workflow.
@@TailwindLabs I agree with Vadim. If it's something that can't be done without React, maybe make a separate series "Advanced Tailwind" or "Tailwind with Front End Frameworks". I felt really good after watching all the other tuts and at this one I was kind of feeling I'm not ready for Tailwind after all as I've never used a front-end framework before.
@@TailwindLabs I think reusable components is great, but it's totally not CSS related. You can have them in Laravel, in VUE, React, and other frameworks. It's just a blocks of code that you include from outside. Once again thank you for this intro series and for your time and knowledge!
@@tomdevisser8150 Exactly! This makes no sense and RUINS the learning experience for those who aren't interested in struggling with a garbage library in order to learn Taiwind. What's he thinking?
If you're style is not rendering in that part of the tutorial, remember to update your tailwind.config.js to work with React: content: [ "./src/**/*.{js,jsx}", ],
I got a little lost here since I don't know much about react (but I will be) is there a way to do this without react? Could someone lead me to another video? I would love for it to be a part of this series since I want to add onto the project... but :\
As this is a TAILWIND video, I was expecting a TAILWIND way of extraction (not using React !), especially that the thumbnail's bottom left icon is tailwind, not React... That video (old, but from the same channel) explains what you would expect from the title of this one : ua-cam.com/video/naJ_rIK6ppQ/v-deo.html
The Tailwind way of extracting things is primarily using components and template partials, as explained in the documentation here: tailwindcss.com/docs/reusing-styles
@@TailwindLabs WOW, that was fast ! And... I must admit, I've learned something with your comment : I was about to answer that I disagree with the methodology explained in this video, but after reading the documentation you pointed out, I'm starting to change my mind ! Thanks ! (I still need to define components as I watched this video to define A links, and forms Inputs; but for the rest... 😅)
Oh my God. I don't know react yet. I am just a beginner and don't know any JS yet. This is sad. You lost me on this video. I will have to close it and come back some other time in the future.
@@bobarndt862must be tough not being able to see past a little bit of react. Based on your comments, the one thing you can seem to do is complain. You could probably use that energy to learn react.
@@Dave-oi4fx you're talking about a minority of absolute beginners - who should probably be focusing on the basics instead of learning a css framework. People should maybe focus on the basics instead of trying to get production ready when they can't even read jsx.
But all of the duplication in the utility classes will still end up in the HTML 😳 Component based reuse is fine (react, vue, svelte, etc) but I very much prefer to replace the TW utility classes with semantic equivalents using the @apply directive inside and outside of reusable components… 😎
Good Tutorial till lesson 06 - than it's totally different with React in it. You need to rewrite and copy paste everything from the old project to this one without any explanation. I quit here. Good explanation till then. You messed it up here. Sorry.
Unfortunately, if you want to learn this material the author is forcing people to suffer through using a crappy library, and that with no warning. I felt like quitting it too.
Episode 1: Look, perfect design without ever leaving the HTML file. 30 minutes later: Let's bring in the whole interactive JS library to display six cards.
The idea is you need _some_ templating mechanism to abstract UI components. _Any_ templating language would do. React was used here but you can use whatever you want.
@@simonswiss hey, thanks for taking the time to respond! I admit, I went a little over-sarcastic probably, and only about this one thing using React. As others have pointed out here, these videos seem to be aimed at winning people over, and trying to explain new framework with another unrelated framework may feel overwhelming for some. Other that, I have to say, I really grew to love Tailwind since then, and I have migrated a few project to use it already. And your series actually played crucial role in helping to understand concepts etc. Thanks again!
@@zaibalo Awesome to hear! Yeah, this series was aimed at people entering their Tailwind journey. We considered using Twig or another templating language - but decided to use React as JSX is a pretty widely known syntax. Definitely didn't need any state/reactive UI for this, just the ability to reuse HTML markup through components.
@@internet4543 thanks man for all information ℹ️ but problem is I know HTML and CSS and suddenly moves to react that not know that will break flow. If I have to understand to how those processes happened then I have to move to learn react or other similar. I just started to learn tailwind css.
@@internet4543 Why? This is about Tailwind and nobody should be forced to struggle with the "library du jour" to do so. If you think React is "amazing" you need to get a life.
@@internet4543 Yes, but to suddenly jump into an entirely different context to demonstrate Tailwind features is nonsense. Particuarly a convoluted mess like React/JSX!
I know you’re promoting what Tailwind can do, and I’m a fan of Tailwind, but this is a *terrible* practice. By not abstracting stuff to CSS classes, you: * lose intent in your markup. Sure, you have the component name, but large projects likely will have similar components with similar names. * cause design drift. I don’t care how good of a designer you are, you can’t possibly memorize the utilities in use across an entire project. Before you know it, some buttons have shadows, others aren’t the right color, and you have inconsistent font sizes and weights. Please don’t do this on any project that has more than a page or two to it if you want your site to look like it wasn’t designed by a software developer.
@@palyanytsia There are plenty of variants. I follow the DRY principle as much as possible, which copy-pasting utility classes a million times over to accomplish the same thing in different places in your site violates. I also want both my markup and my CSS to *express intent*. Yes, utility classes express intent... if you know CSS and Tailwind. But class="btn btn--primary btn--outline" is a lot more understandable and legible than 20 class names piled on. I tend to use SASS and BEM, set up both SASS variables and CSS variables with common theme variables (button color, button border color, warning/info/danger/error colors, border radius, etc.), and apply them to the tailwind config as well for a third variant. As a result, I can either say background: $primary-bg-color, background: var(--primary-bg-color), @apply bg-primary, or just use a "bg-primary" class for a one-off need. I'll even strip unnecessary and unused colors from a custom tailwind colors config, which not only ensures the palette chosen is used, but I've seen it cut 15% off the pre-postcss file size. Sometimes I'll skip the CSS variables since I'm using SASS, but it really depends on the application and its needs. Yes, it's more work up front, and generally not necessary for building a very small site, but it means the button on the first page I create is going to look the same as the button I add to the 200th page. It's also a heck of a lot easier when working with teams, especially that guy that has "big ideas" that violate the design philosophies behind your site - it forces them into using the elements you've already crafted. What tools you choose to use are 100% up to you. If you're making a simple home page for your browser, or a site on your local network that just points you to other resources (like a home page on your NAS that points to your Homebridge and Plex URLs), what I outlined above is entirely overkill - just pull Tailwind from a CDN and go. But you're never guaranteeing consistency if you're spitting out color-indigo-400 in a million places in your app.
@@dougc84 I mean he gave the explanation as to why it's better not to use too much abstraction. If you're going to copy-paste the same styling for a certain element, it means that it can easily be converted into a React element which means what you would only need to use the utility classes once.
This instructor is shockingly good at teaching things. He explains each action he takes with such natural care. Really interesting and super helpful
Thank you! 🙌
@@simonswissno, thank YOU! 🙏
@@klirmio21 🤗
GPT: "Very informative tutorial! Extracting reusable components is such an important aspect of web development, and your explanation made it easy to understand. Tailwind CSS v2.0 seems like a powerful tool, and I appreciate your step-by-step guidance. Looking forward to more tutorials in this series! 👏💻"
I accidentally learned a bit of reactjs 😅
you accidentally acquired some UI super powers
me too :)
That's a good thing
What a joy to listen and learn from this terrific instructor. Came for one lesson, stayed for all 8. Totally loving Tailwind!
Thank you so much for the kind words 🙏
@@simonswiss working with Tailwind+Astro feels like we've entered a whole new world of web-dev: comfortable, intuitive DX delivering blazingly-fast UX. Astro's island approach helps us reduce to an absolute minimum the JS shipped when and if the client needs it, Tailwind's utility classes and purge feature drastically shrinks the CSS bundle shipped🤸♀
@@uquantum I 100% agree with that, and feel the exact same way! ✨
Great example but abrupt switch from pure tailwind to react :-(
it's ok it's React is not too difficult to learn, jump on codecademy for example to get a good react intro!
Utterly absurd!
i think you should explain it from scratch on how to use react in this tutorial, because not 100% of your viewers are react js user
but it's still good that you have tell us what you added and changed in this tutorial
This is one of the only tutorial sections that I am lost in. Please explain react a little more before introducing tailwindcss.
I feel like there should be a video between this one and the last.
React + Tailwind CSS => Best cumbo ❤
Didn't expect to learn something about software architecture, but here I am. Thank you so much for these tutorials! Simon is such a likable guy, I wish he could voice all the dev tutorials I watch, lol :D
Haha, thank you! Must be the French accent 😅
Agree with @wilderledes, the instructor is shockingly good at explaining things. This is a brilliantly constructed tutorial. Bravo! and thanks!
The way he explains react is simply superb i think he should give a react course
This video is actually more about React than Tailwind. The fact that it helps to reduce the duplication of Tailwind's utilities classes is only incidental to React's component architecture.
Yep, the morale of the story is that making the abstraction at the "component" level (the markup) is a great solution. React, PHP, Astro, Vue, Blazor, Twig, Handlebars... anything will do! The essence of the message here is that doing the abstraction at the CSS level doesn't eliminate all the duplication - you still need to re-create the markup multiple times.
You have to make a react tutorial! This was so clear.
@@agenticmark are you the same guy as we see in the video?
do we know his name? I want to see if he has resources elsewhere too!
also @iamthekingofchoco I've followed @DaveGrayTeachesCode 's React JS tutorial and deployed an actual website thanks to it since then, it's really good (It's been a year but maybe others will read this ! :D)
The data inspector (at 5:47) is Quokka VS Code Extension
what do you mean?
QuokkaJS has nothing to do with inferred types
But what if your UserProfile card looks (almost) exactly like Destination card? Do you then copy and paste all the markup in these 2 components? How do you avoid duplication in that case?
I believe yes, but it highly depends, on whether those components will remain similar as design will develop. In case you'd like to have it at one place, you could just have a Card component, which is then contained by concrete UseProfileCard and DestinationCard :)
You need to make a video about things that are not yet possible to do in tailwind, but we can do something like a "hack" to achieve the same result.
For example, things like gradient border colors or space-{}-{} but for padding instead of margin
When you say "cant do in tailwind" do you mean things that do not come pre-installed with it? Everything you can do in CSS you can do with tailwind, you just have to set the configuration up for it if it does not come out the box :)
Great job sharing the files on Github. This "small step" was enough to let some of us outside the demo bandwagon - react js wut?! LoL
What VS Code plugin are you using to show the imported data's properties?
Tailwind CSS IntelliSense
why is there a need to declare key={destination.city}? Wouldn't that same line be sufficient with
Thanks for this great video, I indeed planned to use Tailwind with React, perfect for me. Nevertheless, I'd at least rename this video to something like "06: Extracting Reusable Components with React" or so. Since it's indeed very React-ish. Nothing for guys who want to stick to vanilla JS or Vue or so.
I don't think he went too far with React in this video, I know Vue and understood the video main idea - how refactoring TailwindCSS is more about extracting a component in your framework instead of OCDing with duplication of a string of utility classes - just the same.
Hi my friend and thx for the video and your passion. Can you set the color from your brace from red to some other color. Its hard to see and understand this for the properties in the loop. Thx
Thanks 👍😎 for this set of tutorials. I love single file vue more than react ❤️
It's a good intro series, but i would keep it Tailwind only.
Going to React, Vue and other frameworks might not be what people want to do, especially when expecting Tailwind demo.
Thanks for the feedback! What do you think would be the best way to show people how to extract reusable template partials without using any other tooling? We're trying to make things as realistic as possible and reflect how people use Tailwind in real projects, so something like React felt like the right choice since extracting reusable templates is a huge part of the workflow.
@@TailwindLabs I agree with Vadim. If it's something that can't be done without React, maybe make a separate series "Advanced Tailwind" or "Tailwind with Front End Frameworks". I felt really good after watching all the other tuts and at this one I was kind of feeling I'm not ready for Tailwind after all as I've never used a front-end framework before.
@@TailwindLabs I think reusable components is great, but it's totally not CSS related. You can have them in Laravel, in VUE, React, and other frameworks. It's just a blocks of code that you include from outside.
Once again thank you for this intro series and for your time and knowledge!
@@TailwindLabs Do you think it's "realistic" to jump into some totally disparate technology, particular something as obtuse and trendy as React!
@@tomdevisser8150 Exactly! This makes no sense and RUINS the learning experience for those who aren't interested in struggling with a garbage library in order to learn Taiwind. What's he thinking?
If you're style is not rendering in that part of the tutorial, remember to update your tailwind.config.js to work with React:
content: [
"./src/**/*.{js,jsx}",
],
great encounter with react.it means it is this simple ha
I got a little lost here since I don't know much about react (but I will be) is there a way to do this without react? Could someone lead me to another video? I would love for it to be a part of this series since I want to add onto the project... but :\
ok TailwindCss just clicked for me like 🤯
iI have learn quiet a lot. thanks
As this is a TAILWIND video, I was expecting a TAILWIND way of extraction (not using React !), especially that the thumbnail's bottom left icon is tailwind, not React...
That video (old, but from the same channel) explains what you would expect from the title of this one : ua-cam.com/video/naJ_rIK6ppQ/v-deo.html
The Tailwind way of extracting things is primarily using components and template partials, as explained in the documentation here:
tailwindcss.com/docs/reusing-styles
@@TailwindLabs WOW, that was fast ! And... I must admit, I've learned something with your comment : I was about to answer that I disagree with the methodology explained in this video, but after reading the documentation you pointed out, I'm starting to change my mind ! Thanks !
(I still need to define components as I watched this video to define A links, and forms Inputs; but for the rest... 😅)
You should create a React tutorial
Cool.
Oh my God. I don't know react yet. I am just a beginner and don't know any JS yet. This is sad. You lost me on this video. I will have to close it and come back some other time in the future.
Please consider using Vue for this kind of transition next time, it's a lot easier for new comers :)
Yes, please. JSX is the scourge of modern web development!
Great video! Can't believe people find things to complain about 😂
OK, let me explain. We are here to learn Tailwind. Not React. Clear enough?
@@bobarndt862must be tough not being able to see past a little bit of react. Based on your comments, the one thing you can seem to do is complain. You could probably use that energy to learn react.
@@mmmike3426 not everyone knows JS yet and its framework
@@Dave-oi4fx you're talking about a minority of absolute beginners - who should probably be focusing on the basics instead of learning a css framework.
People should maybe focus on the basics instead of trying to get production ready when they can't even read jsx.
i missing this part with react 🙂
This was a react tutorial, not a tailwindcss one, make custom classes
But all of the duplication in the utility classes will still end up in the HTML 😳
Component based reuse is fine (react, vue, svelte, etc) but I very much prefer to replace the TW utility classes with semantic equivalents using the @apply directive inside and outside of reusable components… 😎
you are not supposed to introduced React in the middle of this tutorial
Please make a video on Hamburger Menu(Navbar), Side Drawer & Modal using Tailwind in Next JS.
are there starter files for this section?
how to run this react project, I never learn react before
Npm start
@@xamantiwari Wow, that was helpful!
Good Tutorial till lesson 06 - than it's totally different with React in it. You need to rewrite and copy paste everything from the old project to this one without any explanation.
I quit here.
Good explanation till then. You messed it up here. Sorry.
Unfortunately, if you want to learn this material the author is forcing people to suffer through using a crappy library, and that with no warning. I felt like quitting it too.
Episode 1: Look, perfect design without ever leaving the HTML file.
30 minutes later: Let's bring in the whole interactive JS library to display six cards.
The idea is you need _some_ templating mechanism to abstract UI components. _Any_ templating language would do. React was used here but you can use whatever you want.
@@simonswiss hey, thanks for taking the time to respond! I admit, I went a little over-sarcastic probably, and only about this one thing using React. As others have pointed out here, these videos seem to be aimed at winning people over, and trying to explain new framework with another unrelated framework may feel overwhelming for some. Other that, I have to say, I really grew to love Tailwind since then, and I have migrated a few project to use it already. And your series actually played crucial role in helping to understand concepts etc. Thanks again!
@@zaibalo Awesome to hear! Yeah, this series was aimed at people entering their Tailwind journey.
We considered using Twig or another templating language - but decided to use React as JSX is a pretty widely known syntax. Definitely didn't need any state/reactive UI for this, just the ability to reuse HTML markup through components.
Zero-knowledge about reactjs and you moved suddenly full confused. 😕You break the flow.
@@internet4543 maybe it’s good but does not know reacts and suddenly go to react break flow.
@@internet4543 thanks man for all information ℹ️ but problem is I know HTML and CSS and suddenly moves to react that not know that will break flow. If I have to understand to how those processes happened then I have to move to learn react or other similar. I just started to learn tailwind css.
@@internet4543 Why? This is about Tailwind and nobody should be forced to struggle with the "library du jour" to do so. If you think React is "amazing" you need to get a life.
@@internet4543 Yes, but to suddenly jump into an entirely different context to demonstrate Tailwind features is nonsense. Particuarly a convoluted mess like React/JSX!
I know you’re promoting what Tailwind can do, and I’m a fan of Tailwind, but this is a *terrible* practice. By not abstracting stuff to CSS classes, you:
* lose intent in your markup. Sure, you have the component name, but large projects likely will have similar components with similar names.
* cause design drift. I don’t care how good of a designer you are, you can’t possibly memorize the utilities in use across an entire project. Before you know it, some buttons have shadows, others aren’t the right color, and you have inconsistent font sizes and weights.
Please don’t do this on any project that has more than a page or two to it if you want your site to look like it wasn’t designed by a software developer.
what do you suggest? Styled components? SASS+BEM?
Each technology has it's own pros and cons
@@palyanytsia There are plenty of variants. I follow the DRY principle as much as possible, which copy-pasting utility classes a million times over to accomplish the same thing in different places in your site violates. I also want both my markup and my CSS to *express intent*. Yes, utility classes express intent... if you know CSS and Tailwind. But class="btn btn--primary btn--outline" is a lot more understandable and legible than 20 class names piled on.
I tend to use SASS and BEM, set up both SASS variables and CSS variables with common theme variables (button color, button border color, warning/info/danger/error colors, border radius, etc.), and apply them to the tailwind config as well for a third variant. As a result, I can either say background: $primary-bg-color, background: var(--primary-bg-color), @apply bg-primary, or just use a "bg-primary" class for a one-off need. I'll even strip unnecessary and unused colors from a custom tailwind colors config, which not only ensures the palette chosen is used, but I've seen it cut 15% off the pre-postcss file size. Sometimes I'll skip the CSS variables since I'm using SASS, but it really depends on the application and its needs.
Yes, it's more work up front, and generally not necessary for building a very small site, but it means the button on the first page I create is going to look the same as the button I add to the 200th page. It's also a heck of a lot easier when working with teams, especially that guy that has "big ideas" that violate the design philosophies behind your site - it forces them into using the elements you've already crafted.
What tools you choose to use are 100% up to you. If you're making a simple home page for your browser, or a site on your local network that just points you to other resources (like a home page on your NAS that points to your Homebridge and Plex URLs), what I outlined above is entirely overkill - just pull Tailwind from a CDN and go. But you're never guaranteeing consistency if you're spitting out color-indigo-400 in a million places in your app.
@@dougc84 I mean he gave the explanation as to why it's better not to use too much abstraction. If you're going to copy-paste the same styling for a certain element, it means that it can easily be converted into a React element which means what you would only need to use the utility classes once.