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
