Even though this WorkCation design has been making the rounds by the TW crew for a few years, I always pick up more tricks by seeing our vacationer scene built from scratch. Simon, you have an enormous gift for teaching. Thx again.
To be honest it would just be as easy (if not easier) learning tailwind css right off the bat. For one it removes the needs to worry about specificity and selectors.
@@chrisarrow Tailwind definitely solidified my understand of CSS. I think I would have learned CSS much faster if I had been introduced to Tailwind sooner.
Tailwind is very hard for begineners because, almost the begineers learn to build responsive web from deskstop then graduallh build on mobile, meanwhile when u use tailwind, u must build responsive web from the movile first approach, that things make a lot people especially beginner confuse to make responsive,
Hadn’t thought about this. But who knows, maybe in 5 years browsers utility classes will be part of the HTML APIs. Jquery changed ECMAScript so I don’t see why not if tailwind becomes the de-facto css framework.
One Of The Best if not more, How To Responsive Design With An useful example. Thanks So Much For This Master Class On Tailwind CSS Responsive Design! 👌
I'm currently working on a video about Creating Responsive Design with Tailwind CSS myself and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
I'm currently working on a video about Creating Responsive Design with Tailwind CSS and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
I'm currently working on a video about Creating Responsive Design with Tailwind CSS myself and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
Is this maintainable in real projects? There are 8 and more classes for every breakpoint and property. It feels like writing inline css within html :-)
It is maintainable, and to avoid long html documents you may have to put all different sections in smaller components, that way it will be much easier and fun to maintain.
I'm currently working on a video about Creating Responsive Design with Tailwind CSS myself and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
Yes, that's exactly what Tailwind is for... create your mobile design and then adapt it to larger screen sizes by using breakpoints. I'm currently working on a video about Creating Responsive Design with Tailwind CSS myself and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
Love the tutorial so far! Question though, when I add a class to my tag, it doesn't want to change the text color, but it will in my tag, I assume it's being over ridden in the css build file but can't seem to find it. What am I missing? 🤔
Hello! I would like to know if it's a common practice to take care of every single breakpoints like you did in the video ? Or usually people just go for mobile and one or two other breakpoints for PCs?
Only if it is needed for the project. But normally you take advantage of relative units and stuff, so that you don't need to change a size for every breakpoint... 😉
Very nice tutorial, I'm still confused about fixing the height in a screen. If I resize my screen smaller from the bottom to the top without changing the width my context will still break. Anyone knows how to fix this?
Awsome tutorial, just starting with frontend and loving it due to easy tutorials such as this, also can someone tell what he was using to preview the webpage in such that he could change the screen width on the go? currently i use the inspect element for this but i can hit 2xl for this.
Wow Wonderful Can you tell me what type of editor you are using?
3 года назад
The editor is VS Code (code.visualstudio.com/) and the preview can be for example the HTML Preview extension: marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode
For Responsive Design, we need to change the root ( !!! ) rem depending on the screen width. It is enough to change in one place, and the values will be recalculated throughout the document. Also, Tailwind CSS no use of different vw values for padding - margin - font - ... (I see only 100% or 100vw, for the width a little better). I did not find such opportunities in the documentation. Without this, there are a lot of lines of instructions.
You can do all this with the tailwind config file , but changing the root font and depending on rem units only is a very flaky strategy and not really responsive, if anything is not rem or % you are fucked . YOu much better off with using clamp() and minmax() for responsive fonts
Even though this WorkCation design has been making the rounds by the TW crew for a few years, I always pick up more tricks by seeing our vacationer scene built from scratch. Simon, you have an enormous gift for teaching. Thx again.
In a nutshell, Tailwind is not for beginners on CSS. It is a real game changer for most of senior devs focused on UI/UX.
What u mean today my first day with tailwind and first week with frontend and i fkn love it
To be honest it would just be as easy (if not easier) learning tailwind css right off the bat. For one it removes the needs to worry about specificity and selectors.
@@chrisarrow Tailwind definitely solidified my understand of CSS. I think I would have learned CSS much faster if I had been introduced to Tailwind sooner.
Tailwind is very hard for begineners because, almost the begineers learn to build responsive web from deskstop then graduallh build on mobile, meanwhile when u use tailwind, u must build responsive web from the movile first approach, that things make a lot people especially beginner confuse to make responsive,
Very good walk through. These videos works as best practices when I use Tailwind for production.
Thank you very much Tailwind Labs for creating such a great series.
Simon, you are such an incredible teacher!
I'm speechless on how good this is....
Me too! The overall feeling is like we write CSS wrong for all these years!
I just discovered tailwind css over the weekend and I’ve been on a binge watch of every video I can find. I am speechless too.
Amazing teaching! As a Tailwind beginner, I'm fully convinced now!
That's awesome to hear! Glad the video was helpful ❤
If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉
This was wonderful. I'm learning a lot and I'm excited to try and build my own page using these tips and tricks.
this is so good that I want all this classes should be browser defaults so every browser have inbuilt css framework
Hadn’t thought about this. But who knows, maybe in 5 years browsers utility classes will be part of the HTML APIs. Jquery changed ECMAScript so I don’t see why not if tailwind becomes the de-facto css framework.
One Of The Best if not more, How To Responsive Design With An useful example.
Thanks So Much For This Master Class On Tailwind CSS Responsive Design! 👌
I'm currently working on a video about Creating Responsive Design with Tailwind CSS myself and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
Hey that's pretty cool. Thanks for sharing.
Too many classes in the html tags ... it all gets cluttered up ... external stylesheet file keeps it better managed without clutter
I usually hate dabbling in frontend stuff because of css. But this makes it way more accessible for people like me.
I have searching for this tutorial all my life.
This video is all I ever needed to implement responsive design using tailwind css!
I'm currently working on a video about Creating Responsive Design with Tailwind CSS and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
@@lukas.webdev Looking forward to it!
@@nikhil182 Awesome! 😃 Make sure to subscribe to get notified when I drop the video...
BTW: The video is already online 😉
What's the preview extension?
same question :)
Wonder the same
me too? and which code editor he used?
@@nurharizulaimanmatharith4023 vscode theme night owl
@@tiagoagm The extention is a work-in-progress extention by that team, hopefully they will release soon
Amazing explanation
🙏🏻 thank you
I'm currently working on a video about Creating Responsive Design with Tailwind CSS myself and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
Hi, which extension you use for previewing browser inside the vscode? And can I use it with react jsx? Thank you!
Loving Tailwind!
How to enable that preview and breakpoint.json on VS Code?
Amazing content
I just posted a video about Tailwind CSS in 2023 - maybe this is also helpful for you. 😉
Awesome tutorial and presentation delivery.
great instructions. very effective video. truly.
Is this maintainable in real projects? There are 8 and more classes for every breakpoint and property. It feels like writing inline css within html :-)
It is maintainable, and to avoid long html documents you may have to put all different sections in smaller components, that way it will be much easier and fun to maintain.
try tw w vuejs
fantastic work. Thanks.
Very nice. Thanks
Why do we need to duplicate some of HTML markup like img to apply a different style instead of overwriting it on a different screen ??
Hello which editor do you use? I'm using VS code and can't get side by side preview like you do
This is Amazing🥰😍🤩😘
Are you using vscode - if yes can you please mention the plugin for preview ?
thank you for sharing this knowledgedge
Thank you!
finally front-end made easy
really Really awesome
cool video)
This guy is dammmmm! goooood!
how to show preview(html) inside vs code like in the video?
download the extension 'live server' in vs code or look at the first video of this playlist
On of the powerfull utility is breakpoint
What about devices with width 360px?
I believe you can define your custom breakpoints in tailwind.config.js?
Amazing
I want to like this, thrice.
good
Awesome
what's that preview extension you use bro?
"ok let's quickly change the color of the background of every break-point just for fun"
One of the best walkthroughs I've ever seen any company do, thanks a lot!
Absolutely!
Its awesome, bu Webflow is the best :P
Hello, can you give me the name of your preview application?
i need the same
Can you make a tutorial on this but you use only Flex properties. The flexbox full , basis-full or % and order2. Coz I feel like it will work
man .. the quality of your videos is so awesome
I've never been this satisfied understanding the grid and responsive concepts. Thanks a lot man😃
This video shows us how powerful and convenient Tailwind CSS is at the same time!
what the preview extenstion that he use???
It is truly a "From Zero to Production" walkthrough about Responsive Design. Thanks!
I'm currently working on a video about Creating Responsive Design with Tailwind CSS myself and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
Thanks! Great tutorial series! after watching it, I'm gonna give a chance to Tailwind.
Tailwind is the future of CSS
Looks good! Would you say it suits building mobile first with those breakpoint settings?
Yes, that's exactly what Tailwind is for... create your mobile design and then adapt it to larger screen sizes by using breakpoints.
I'm currently working on a video about Creating Responsive Design with Tailwind CSS myself and I will probably drop it next week - this should be even more helpful cause I cover things that he does not even mention in this video ... 😉
Thankyou sir for this video
Love the tutorial so far! Question though, when I add a class to my tag, it doesn't want to change the text color, but it will in my tag, I assume it's being over ridden in the css build file but can't seem to find it. What am I missing? 🤔
Not sure if the design paradigm itself or the tutorials are gassier🔥🔥🔥 excellent work!
that is so cool! thank you king
Hello!
I would like to know if it's a common practice to take care of every single breakpoints like you did in the video ?
Or usually people just go for mobile and one or two other breakpoints for PCs?
Only if it is needed for the project. But normally you take advantage of relative units and stuff, so that you don't need to change a size for every breakpoint... 😉
Hello! Is there a way to make my text sizes fluid responsive? Scaling based on viewport size?
As someone that hates css this framework made my life a lot easier. THANK YOU!!!!
If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉
Are not calc functions and auto layouts superior to media queries?
What extension you use to preview the output with screen size?
Which preview extension is that?
Nice thanks.
Which IDE are you using ?
I use tailwind in all project
Second to none
Carry on
thank you 💙
Amazing!!! 🤩
Very nice tutorial, I'm still confused about fixing the height in a screen. If I resize my screen smaller from the bottom to the top without changing the width my context will still break. Anyone knows how to fix this?
Amazing
Is there a way to fix fontsize , spacing between block elements , button size for different breakpoints in advance , how to achieve that
Awsome tutorial, just starting with frontend and loving it due to easy tutorials such as this, also can someone tell what he was using to preview the webpage in such that he could change the screen width on the go?
currently i use the inspect element for this but i can hit 2xl for this.
what is the difference between 'inset-0' and '-inset-0' ? The docs didn't explain this
simply,acknowledged,understanding!!!
Bro you did a great job on demonstrating Tailwind!
Hi, Can someone tell me what font is he using in editor?
omg this is what i need thanks tailwind labs
Greate tutorials. Thanks!
That was simply amazing!
This is a nice realtime tutorial for tailwind
This is the tailwind css holy grail
That’s absolutely amazing!
WOW. Just WOW. Fantastic!
French ???
Greattttt ❤️❤️❤️❤️❤️❤️
Thank you!
which font for coding is he using can anyone tell
I'm sorry, but no ...
@@lukas.webdev Cascadia Code with italic Alhumdulilah 😙😙😙
@@noiam8351 Oh wow, thanks 😉
it's just amazing
What text editor are you using it looks awesome!
vs code
Wow Wonderful
Can you tell me what type of editor you are using?
The editor is VS Code (code.visualstudio.com/) and the preview can be for example the HTML Preview extension: marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode
@ already try that...but it doesnt load the css
you need to load localhost:3000, not the html page.
For Responsive Design, we need to change the root ( !!! ) rem depending on the screen width. It is enough to change in one place, and the values will be recalculated throughout the document.
Also, Tailwind CSS no use of different vw values for padding - margin - font - ... (I see only 100% or 100vw, for the width a little better). I did not find such opportunities in the documentation.
Without this, there are a lot of lines of instructions.
You can do all this with the tailwind config file , but changing the root font and depending on rem units only is a very flaky strategy and not really responsive, if anything is not rem or % you are fucked . YOu much better off with using clamp() and minmax() for responsive fonts
Simon’s channel ruclips.net/video/q5ZaauBpSlU/видео.html