CSS Grid - What's new in Tailwind CSS
HTML-код
- Опубликовано: 27 сен 2024
- Tailwind CSS v1.2 added a comprehensive set of utilities for working with CSS Grid Layout! Let's take a look at how they work.
Play with the code on Tailwind Play:
play.tailwindc...
The amount of thought and work that went into this would make anybody's mama proud.
I didn't expect Tailwind'tm would make this tutorial super easy
more tutorials should be like this one! straight to the point and with many examples! much appreciated.
So cool!! Would be awesome to have a basic tutorial with a app layout using these grid utilities.
I learn display:grid from Tailwind classes :D
Love it when Tailwind CSS helps to teach actual CSS 🎉
Amazing, great explanation with very good case examples. Thanks
Thank you - it was fun coming up with these demos! 👍
I-I'm speechless after watching this (and excited, woah). Me dying over trying to do responsive design and grid layouts -- this is just awesome. I'm gonna have to watch this video again when I resume my project, this is so on-point and focused, while making it exciting (like showing how things can be used like swapping out code, improving it -- its just amazing). Thanks!
The end was kind of abrupt but what an awesome piece of educational css grid!
Yeah it indeed came to a full hard stop 😅 Thanks for the kind words, I think I got better at smoother endings with the next videos - that was the very first one 👍
Loving this videos!!
I hope a "tailwind way" of doing grid template areas is in the pipeline :)
not the exact same, but there is a plugin for grid template areas on GitHub
Amazing work and perfectly explained, thank you!
Thank you! ❤️
simple and straightforward explanation keep up the great work
Magic . . . .Tailwind is going to dominate the frontend!! Keep going with your excellent work!
Im watching this while in a zoom meeting, and I cant wait to get off so I can try it :)
This was FANTASTIC! Thanks!
These videos are awesome. It'd be amazing if you could go back and do a video in this style for each of Tailwind's "old" features.
That's the plan in the long run 😅
Best video so far simple, no nonsense 🤲
Why use and for the items instead of just ?
That's a good question, and not sure I have the answer 😅
I think I had a list of UI cards first, and it made sense in the markup - but when I moved to a more abstract grid, it could very well have been just divs :)
Amazing video, thank you!! Very easy to understand :)
Hi! Great explanation, i have one question, what tool can a use to see the grid lines on the browser like you do? I think it’s great for development
This is the developer tools in Firefox! I had them off-screen for the video, but if you open dev tools in Firefox and inspect a grid element, you'll have options to show grid lines etc 👍
Tailwind CSS must be named Tailwind I'm Thrilled!! :)
Thanks for this nice tutorial.
This is amazing. Why I learn about this framework only now?!
and the presenter is excellent!
Aww, thanks!
tailwind was so cool
Basically, this:
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
i miss u Simon :(
thank you so
is it possible to use grid areas with tailwind?
thank you great teacher
Can we please have a video setting up Tailwind CSS with Gatsby?
Is it possible to have overlapping containers using CSS grid in Tailwind?
Do you mean "grid" containers, or "cell" containers should overlap? I think both are possible 👍
@@TailwindLabs Thanks for the reply! I mean both. A lot of interesting CSS grid layouts use both overlapping cells and overlapping grids. I would love to see how this is done with Tailwind.
Also offtopic, but wonder what theme and font do you use on your editor, looks nice!
font-dankmono
liked and subscribed bro...
great
Amazing! is this even possible using bootstrap?
What is your VSCode theme??
So nice, can you also share your vscode settings like font, theme and etc please, thanks
dankmono
What editor and plugins was used here?
If you ever feel lonely, remember about the only guy who hit unlike in this awesome video (atm)
How to make a loop of these while using Vue or Laravel?
You would implement a loop in your respective language
@@biigsmokee I am talking about like I write post in posts then {{post.title}} if there are several size grids how do I adjust them
@@tanzimibthesam5861 I don’t know if this is the best way, but in Vue I dynamically inject the classes with same loop that’s injecting the content.
omg what
T H A N K S
Absolutely Excellent....... Just Wow And Tnq Very Much
beautiful explanatoin in love with tailwind css
Completely off topic, but, what's the setup for this recording? It's so well aligned to the center! 😆
Used an app called "divvy" to set up window dimensions. Works both on Mac and PC 👍
@@TailwindLabs thanks!
Loving the explaination, 10/10, it's clean, the constant switching between scenes (code / example) is on point, the voice is precise, explains enough but without being neither slow or boring, good content! 🙃
@@TailwindLabs Outstanding work 👏
@@januariopinto_ Thank you so much! ❤️
meanwhile boostrap in 2050: We introduce Css grid.
this is brilliant!
To be honest, i find it easier to work with grid when using straight CSS.
Sure thing - CSS grid has a lot of bespoke, custom scenarios where it's probably better to write the CSS directly. We've tried to abstract away a set of useful utilities that help scaffold common layouts 👍
Now this is some nice real shit!!!
amazing quality and explanation, thanks
Thank you! 👍
What font is it that you’re using in the editor?
dankmono
Great video