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!
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?
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; } }
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.
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🇨🇭
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.
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,
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?
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 😅
We demand more videos from this guy! Such a legend of a teacher! Much love ❤️
Thank you, you're very kind 🙏
I gotta say the approach was brilliant, well done.
Thank you! 🙏
I am begginer of tailwindcss, your video resolve my different screen problem. Love your jokes.
I'm so addicted to these videos man! So satisfying to watch!
Amazing tutorial. Simple and to the point. The possibilities with this are endless.
Thanks for this videos Simon, Tailwind is simply awesome.
Not scared of the grid anymore. Thank you Flynn.
Explained in such a simple way ❤
Thanks for another one. I am now able to replicate a design thanks to your videos. Waiting for more and more.
Really excellent, and I love the way you explain complicated things to make them very smooth and easy to understand.
Thank you so much.
Very sad that there is no more vids from this great man :c
The dog n the kid distraction 😁. I love the fun touches u putting in.
Awesome, Simon !
It's really a great topic
Thank you - glad you enjoyed it! 🙏
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! this was everything I wanted. Thanks a lot.
superbly explained
🤯 Wow... Its so addicting to watch your videos. Keep up the good work!
Beautiful, it has never been this easy
Polish site as an example - great! :D As a Pole I am proud of it :D
🙏🇵🇱
You're a lifesaver! awesome tutorial
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!
Nice one. Just learnt about the CSS aspect ratio
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 🇨🇭
This sort of thing is great practice for learning responsive design
after a month. this was a good one
Yeah, it's been a long time coming.
Wow These is powerful, I am doing my react project with tailwind , this is a game-changing way of coding
He's back. Let's goo
I'm back!
first time i see this, i know this gotta be great.
Thanks for video. LooK forward to more.
simply awesome, love the tutorials
Great stuff very well presented. Thank you 👏
Thanks Simon for this video!
Wow, nice one! 😍
Awesome video, these are great!
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?
My favourite channel
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;
}
}
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...
I adjusted a bit and removed nested grid. The path in tailwind playground (since RUclips deletes comment with links):
4HM1tcRork
I'm back! 😎
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🇨🇭
Brilliant as always my god !
Amazing videos keep it up..
A lot going on here! Thanks.
Very helpful , thank you
Such a wonderful video, can you please tell me the name of extension's you used to measure & check alignment stuffs?
I luv this and also the fact that cause some giggling as I learn lol! Nothing like a Self Centered paragraph ... LOL
Any chance you could do some flex/tailwind videos as well?
thx a lot cuz of your useful content =)) it helps us a lot! keep going...
i realy enjoy in this video thanks❤🔥
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.
Excellent content. How do you get those purple markups lines on your browser?
Awesome. Thank you. 👌
Great Voice! Thank you
Why does the col-start-2 push everything with the blue box while with the paragraph it only replaced it with the boxes
That effect on 'self-center'. HAHAHAHAHAHA
Certified dad right there
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.
THANK U THANK U and Plz more Grid videos :)
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 ✨
So great!
Thanks for sharing !
Great video Thanks a lot
I have no more excuses not to start using grids now
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,
Hi, Tailwind gives cross-browser compatibility to css-grid? Thanx
very nice, but can you center a div?
tailwindcss is awesome !!!
More please
Thank you!
god I love tailwind
Suggestion: text-shadow utilities
Thank you very much
What "Preview" extension do you use in your VSCode?
How come it's not squared at the xs layout?
Does anyone know what font is being used in the code editor?
How can I activate these grid guides?
It's just too good to be true
How do you preview your website in vs code?
can i use this design for my website?
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 😅
What is editor font that he is using?
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
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..
perfect!👊
Thanks.
looks great in the video, but I cc the code and it doesn't look the same..
You are wonderfull .... 😘😘😘
Very cool..
thank you :D
What's the name of that theme
Is xs: part of tailwind 3?
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 👌
Awesome
What is Max w 5xl?
Tailwind FTW
Can somebody tell me, which font he using in vscode.
Dank Mono
@@larrasu do you also use this ?
@@darkvent Yup.
Aswsome tutorial.
❤💙
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?
niceee