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.
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 ... 😉
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,
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 ... 😉
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.
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 ... 😉
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 ... 😉
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... 😉
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? 🤔
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.
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.
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?
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
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.
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.
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 ... 😉
This video shows us how powerful and convenient Tailwind CSS is at the same time!
Very good walk through. These videos works as best practices when I use Tailwind for production.
One of the best walkthroughs I've ever seen any company do, thanks a lot!
Absolutely!
Its awesome, bu Webflow is the best :P
Thank you very much Tailwind Labs for creating such a great series.
Simon, you are such an incredible teacher!
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 ... 😉
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,
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😃
what's that preview extension you use bro?
Not sure if the design paradigm itself or the tutorials are gassier🔥🔥🔥 excellent work!
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 ... 😉
Tailwind is the future of CSS
This was wonderful. I'm learning a lot and I'm excited to try and build my own page using these tips and tricks.
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 ... 😉
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.
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 😉
I have searching for this tutorial all my life.
"ok let's quickly change the color of the background of every break-point just for fun"
Bro you did a great job on demonstrating Tailwind!
I usually hate dabbling in frontend stuff because of css. But this makes it way more accessible for people like me.
Hey that's pretty cool. Thanks for sharing.
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
How to enable that preview and breakpoint.json on VS Code?
what the preview extenstion that he use???
This is a nice realtime tutorial for tailwind
Hi, which extension you use for previewing browser inside the vscode? And can I use it with react jsx? Thank you!
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 ... 😉
Thanks! Great tutorial series! after watching it, I'm gonna give a chance to Tailwind.
Brilliant tutorial. You are a great teacher!
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
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 ... 😉
Hello, can you give me the name of your preview application?
i need the same
simply,acknowledged,understanding!!!
Are not calc functions and auto layouts superior to media queries?
What extension you use to preview the output with screen size?
omg this is what i need thanks tailwind labs
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?
This is the tailwind css holy grail
great instructions. very effective video. truly.
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? 🤔
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
Thanks to share your Knowledge ! That's Great!
Which preview extension is that?
Which IDE are you using ?
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.
Are you using vscode - if yes can you please mention the plugin for preview ?
Is there a way to fix fontsize , spacing between block elements , button size for different breakpoints in advance , how to achieve that
what is the difference between 'inset-0' and '-inset-0' ? The docs didn't explain this
Amazing content
I just posted a video about Tailwind CSS in 2023 - maybe this is also helpful for you. 😉
Awesome tutorial and presentation delivery.
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 ??
Loving Tailwind!
Hi, Can someone tell me what font is he using in editor?
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?
That was simply amazing!
Hello which editor do you use? I'm using VS code and can't get side by side preview like you do
That’s absolutely amazing!
that is so cool! thank you king
What text editor are you using it looks awesome!
vs code
WOW. Just WOW. Fantastic!
This is Amazing🥰😍🤩😘
What about devices with width 360px?
I believe you can define your custom breakpoints in tailwind.config.js?
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
fantastic work. Thanks.
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.
Thankyou sir for this video
finally front-end made easy
Amazing!!! 🤩
Second to none
Carry on
thank you 💙
This guy is dammmmm! goooood!
Thank you!
it's just amazing
really Really awesome
Very nice. Thanks
Greate tutorials. Thanks!
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
Greattttt ❤️❤️❤️❤️❤️❤️
Too many classes in the html tags ... it all gets cluttered up ... external stylesheet file keeps it better managed without clutter
On of the powerfull utility is breakpoint
I use tailwind in all project
Nice thanks.
Amazing
Awesome
I want to like this, thrice.
cool video)
good
French ???
Simon’s channel th-cam.com/video/q5ZaauBpSlU/w-d-xo.html
thank you for sharing this knowledgedge
Thank you!
Amazing