That’s a good one. I still don’t use grid much as the sites we work on have to still work with old machines. Nice to see what things it can do abs in tw too
this was great! very helpful since i'm new to learning css and html, i seem to have a good handle on it, but i've been working on a project and you helped me realise what i needed to fix my issue :D so thank you!
at 10:20 for the paragraph for meduim breakpoint when i add only md:col-span2 it span from the first column and i didn't add md:col-start-1? any one try it please? it should span from it's postion which is second column and sexond row,
I am surprised, that the xs:col-start-2 does not push all other elements further (the first blue box comes left to it), while the md:col-start-2 pushes all boxes along. Is this because of the xs:row-start-2? I am confused.
I think I found the issue - following your example tailwind.css will not create responsive variants of the square class. I had to wrap this in @responsive. Is there another way to achieve this in the tailwind.config.js file?
Hi, love the video. All your tutorials are awesome. I would love to use the Preview Plugin you use and I couldn’t really find a good Preview Plugin yet. Thanks in advance! #SwitzerlandGang🇨🇭
If you are having problems with the xs:square not working Wrap the .square class in the @responsive directive, like so: @responsive{ .square{ aspect-ratio: 1/1; } }
How did you get the browser preview window within vscode itself? I usually have to open another browser window (safari) and place vscode-safari side by side.
Awesome 😍 what did you use to display grid directly on your html ? I’m curious about it because it’s really more visual to explain grid system. Thanks a lot for this nice content as weel 🙏
It would be great if you can add links to Tailwind Play with the code of these videos. I have one doubt about how something works, but it's too much of a pain to reproduce all the content by hand :(. In case anyone is wondering, the doubts I have is how come that defining the start for a cell on the xs breakpoint moves the cell forward, but the next cell is moved backwards, whereas in md the cell is moved forward but an empty cell is left behind. Shouldn't they have the same behaviour?
We demand more videos from this guy! Such a legend of a teacher! Much love ❤️
Thank you, you're very kind 🙏
Haha I love the touch of humor... and I really love these vids. They've definitely accelerated my adaptation of Tailwind.
I intend to creep more and more silly humour in going forward, so I got you covered 😅
I gotta say the approach was brilliant, well done.
Thank you! 🙏
Amazing tutorial. Simple and to the point. The possibilities with this are endless.
I'm so addicted to these videos man! So satisfying to watch!
I am begginer of tailwindcss, your video resolve my different screen problem. Love your jokes.
Really excellent, and I love the way you explain complicated things to make them very smooth and easy to understand.
Thank you so much.
Thanks for this videos Simon, Tailwind is simply awesome.
Thanks for another one. I am now able to replicate a design thanks to your videos. Waiting for more and more.
Not scared of the grid anymore. Thank you Flynn.
Explained in such a simple way ❤
The dog n the kid distraction 😁. I love the fun touches u putting in.
Beautiful, it has never been this easy
That’s a good one. I still don’t use grid much as the sites we work on have to still work with old machines. Nice to see what things it can do abs in tw too
🤯 Wow... Its so addicting to watch your videos. Keep up the good work!
Awesome, Simon !
It's really a great topic
Thank you - glad you enjoyed it! 🙏
this was great! very helpful since i'm new to learning css and html, i seem to have a good handle on it, but i've been working on a project and you helped me realise what i needed to fix my issue :D so thank you!
Great to hear!
Very sad that there is no more vids from this great man :c
superbly explained
Polish site as an example - great! :D As a Pole I am proud of it :D
🙏🇵🇱
Wow These is powerful, I am doing my react project with tailwind , this is a game-changing way of coding
You're a lifesaver! awesome tutorial
This sort of thing is great practice for learning responsive design
Wow! this was everything I wanted. Thanks a lot.
at 10:20 for the paragraph for meduim breakpoint when i add only md:col-span2 it span from the first column and i didn't add md:col-start-1? any one try it please? it should span from it's postion which is second column and sexond row,
Nice one. Just learnt about the CSS aspect ratio
after a month. this was a good one
Yeah, it's been a long time coming.
His contents are awesome. Also, I think he is a french. Vive la France!
I'm actually Swiss - but from the French-speaking part of Switzerland 🇨🇭
first time i see this, i know this gotta be great.
I am surprised, that the xs:col-start-2 does not push all other elements further (the first blue box comes left to it), while the md:col-start-2 pushes all boxes along. Is this because of the xs:row-start-2? I am confused.
I am wondering the same...
simply awesome, love the tutorials
Great stuff very well presented. Thank you 👏
Thanks Simon for this video!
Thanks. Great tutorial - the aspect-ratio is not working though on Safari 14 (macOS).
I think I found the issue - following your example tailwind.css will not create responsive variants of the square class. I had to wrap this in @responsive. Is there another way to achieve this in the tailwind.config.js file?
He's back. Let's goo
I'm back!
Thanks for video. LooK forward to more.
Why does the col-start-2 push everything with the blue box while with the paragraph it only replaced it with the boxes
Does anyone know what font is being used in the code editor?
Hi, love the video. All your tutorials are awesome. I would love to use the Preview Plugin you use and I couldn’t really find a good Preview Plugin yet. Thanks in advance! #SwitzerlandGang🇨🇭
Awesome video, these are great!
My favourite channel
Wow, nice one! 😍
Hi, Tailwind gives cross-browser compatibility to css-grid? Thanx
How come it's not squared at the xs layout?
Such a wonderful video, can you please tell me the name of extension's you used to measure & check alignment stuffs?
How can I activate these grid guides?
How do you preview your website in vs code?
i realy enjoy in this video thanks❤🔥
What is editor font that he is using?
If you are having problems with the xs:square not working
Wrap the .square class in the @responsive directive, like so:
@responsive{
.square{
aspect-ratio: 1/1;
}
}
Is xs: part of tailwind 3?
Any chance you could do some flex/tailwind videos as well?
Does the 'min-h-screen' class center the element vertically ?
No. Min h screen makes the element fill the whole screen vertically, adding "items-center" to a grid or flex element will center the children
Brilliant as always my god !
How did you get the browser preview window within vscode itself? I usually have to open another browser window (safari) and place vscode-safari side by side.
very nice, but can you center a div?
A lot going on here! Thanks.
What's the name of that theme
I adjusted a bit and removed nested grid. The path in tailwind playground (since RUclips deletes comment with links):
4HM1tcRork
Another amazing video. But can you please share your VS Code extensions specially the preview window? Thank you.
It is called "Live Preview". Author is Microsoft.
thx a lot cuz of your useful content =)) it helps us a lot! keep going...
can i use this design for my website?
Amazing videos keep it up..
What is Max w 5xl?
Very helpful , thank you
That effect on 'self-center'. HAHAHAHAHAHA
Certified dad right there
What "Preview" extension do you use in your VSCode?
I luv this and also the fact that cause some giggling as I learn lol! Nothing like a Self Centered paragraph ... LOL
Excellent content. How do you get those purple markups lines on your browser?
Great video! Thank you!
By the way.. what are you using to have the padding displayed all over the layout with little purple lines?
That's the Firefox dev tools, they allow you to outline the Grid lines ✨
Great Voice! Thank you
Nice one 👍...
Awesome. Thank you. 👌
Great video Thanks a lot
So great!
Thanks for sharing !
looks great in the video, but I cc the code and it doesn't look the same..
Can somebody tell me, which font he using in vscode.
Dank Mono
@@larrasu do you also use this ?
@@darkvent Yup.
THANK U THANK U and Plz more Grid videos :)
Wait. Did you remove the music overlays? THANK YOU!!! 🙏
Heh, this is the first video where I experiment with background music through the entire video to cover my kids/dogs in the background 😅
You are wonderfull .... 😘😘😘
Thank you!
I'm back! 😎
tailwindcss is awesome !!!
Suggestion: text-shadow utilities
Thank you very much
perfect!👊
It's just too good to be true
Hey Simon, what extension do you use to preview the HTML in vs code?
It is called "Live Preview". Author is Microsoft.
@@IAmSammyskills Cool.. thanks..
More please
Awesome 😍 what did you use to display grid directly on your html ? I’m curious about it because it’s really more visual to explain grid system.
Thanks a lot for this nice content as weel 🙏
Firefox Developer Edition will show grid lines in dev tools.
@@travholt Yep that's it! Chrome also shows the grid lines, but FF makes it look much prettier, so I picked that for the video 👍
@@travholt thanks a lot for this information 👌
Very cool..
thank you :D
Thanks.
god I love tailwind
It would be great if you can add links to Tailwind Play with the code of these videos. I have one doubt about how something works, but it's too much of a pain to reproduce all the content by hand :(.
In case anyone is wondering, the doubts I have is how come that defining the start for a cell on the xs breakpoint moves the cell forward, but the next cell is moved backwards, whereas in md the cell is moved forward but an empty cell is left behind. Shouldn't they have the same behaviour?
I have no more excuses not to start using grids now
Awesome
Aswsome tutorial.
❤💙
Tailwind FTW