They're typically built with Figma, but definitely using Tailwind "design tokens" for colors, spacing, font sizes etc, which made that video really straightforward to make 🙌
I have been using Tailwind CSS in the past few projects. It is really a very good tool for fast front-end development. Now I do not want to use any other front-end UI frameworks. I built the whole project with less than 100 lines of custom CSS. Thanks to the tailwind CSS team.
I'm assuming that tailwind only provides the layout and some general design classes. Other than that any specific designs or layouts will require custom css & js. For example horozontal layouts etc. Also I want to know that all these tailwind classes need to be memorized? If yes then how and from where, as a backend dev.
About the triangle not being centered, I believe centering works by centering the box around the triangle/svg. Because the center of mass of the triangle differs from the center of mass of the box containing it, it looks kinda wierd, because the center of mass of the triangle isn't actually in the center of the circle
Wouldn't it be possible to use Playwright, for example, to actually output a png from this? I would be really curious to see some kind of PDF output of Tailwind styled pages using Playwright or similar.
Why do you use grid over flex for vertically centering the play button? Also, why ring over border? Just trying to get a handle on when to use them when it seems you could achieve it either way?
Grid and flex can both vertically center, and now that grid is available in all browsers, it's mostly a personal preference. Grid is actually shorter using `grid place-items-center` vs `flex justify-center items-center` As for ring vs border, the default box-sizing in Tailwind is 'border-box', so using border will affect the height/width of the content. With ring, it wraps around the content, so is probably better for things like icons where you don't want to affect the size. Also, you can use ring-offset to give space between content and ring. I created an example here: play.tailwindcss.com/iz6rCSLraX
Awesome video, shows how easy it is to design and mockup with tailwind! How do you export it to an image easily? Also, highly recommend not using those little "aha" sound effects towards the end, very weird and jarring.
I pasted my screenshot in the "preview" app, and saved the image 👍 You can also paste it in Figma, Slack, Notion, anything that accepts a "paste" of an image. Re: fun little sound effects - it's indeed likely weird, but I like to experiment with some fun things and keep viewers surprised. I promise I won't take it toooo far.
Is the w-[640px] for example built into Tailwind now or is it a plugin/customization? I think it is really cool and will help me for sure with some projects
It's part of Tailwind CSS JIT mode. It allows you to use arbitrary values in addition to the default design system. tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
@@Kiliman3970 Appreciate that info. I use Tailwind with JIT on all my SvelteKit projects and never thought of adding arbitrary values like that which would have been great because there has been many a times I've made a specific class just for arbitrary sizes...
@@Protoscribe You can put any size, it's called "arbitrary value" support. It's really powerful, but I'd try to stick to the Tailwind config values in general for design consistency, and only use "magic numbers" for specific situations.
I really loved these thumbnails so I kinda recreated them in Canva for non-commercial (personal) use. But this is great! If coupled with CSS variables, we can automate the creation using Puppeteer.
Haha yep this is exactly what I was thinking of after editing the video - would be cool to feed some data to a script that generates those with puppeteer 👍
Appreciate that you've included accessibility into this as a demonstration of best practice even though it isn't needed here specifically.
Of course the Tailwind thumbnails are actually built with Tailwind! 🔥
They're typically built with Figma, but definitely using Tailwind "design tokens" for colors, spacing, font sizes etc, which made that video really straightforward to make 🙌
@@simonswiss it's a joke lmao
Don't mind me re-watching my own videos 2 years later, and being in awe of how cool they are 👁👄👁
i never get bored with tailwind CSS, Thank you so much
I have been using Tailwind CSS in the past few projects. It is really a very good tool for fast front-end development. Now I do not want to use any other front-end UI frameworks. I built the whole project with less than 100 lines of custom CSS. Thanks to the tailwind CSS team.
I'm assuming that tailwind only provides the layout and some general design classes. Other than that any specific designs or layouts will require custom css & js. For example horozontal layouts etc.
Also I want to know that all these tailwind classes need to be memorized? If yes then how and from where, as a backend dev.
No words! Absolutely amazing
I'm a backend and really interest with frontend after watching all video from this channel, cool
Your doing a great job, your content is great and fun at the same time.
It even includes some insight of creating element that's sr friendly
About the triangle not being centered, I believe centering works by centering the box around the triangle/svg. Because the center of mass of the triangle differs from the center of mass of the box containing it, it looks kinda wierd, because the center of mass of the triangle isn't actually in the center of the circle
Why not gap instead of space at 3:30?
This was amazing, learned a lot! Thanks
Glad to hear it's helpful!
Tailwind is great, but...this guy is AMAZING 🌟
Why learn photoshop when you can just use tailwind at this point, amazing work as always
No question this guy is professional in Tailwindcss :)
I would have never thought of making a youtube video thumbnail with code. ^_^
You're watching a master at work!
This is sick. ❤🔥
Honestly this was of the most fun videos I put together - really enjoyed that one!
Could you share the Visual Studio Code settings, plugins and themes that are being used in these videos?
You are really the fun guy.
This guy is lit🔥
just the 'broop' word XD you're amazing man
after using tailwing i really dont find anyother library usefull near to it for me tailwind is the only library i will only use for design
i absolutely love this channel!!
Whooo amazing!
Wouldn't it be possible to use Playwright, for example, to actually output a png from this? I would be really curious to see some kind of PDF output of Tailwind styled pages using Playwright or similar.
Gonna use the concept to build nice images and be more visual on twitter 😄
i love your videos. please dont stop making them.
I never wanted to stop!
Great video
Wow I learned a lot from this video, well done!
Amazing video, as usual 🔥
Your explaination is very clear! Please make video about tailwind best practice, such as mobile first and etc 😀
Master at work 🔥
This is cool af
Great video Simon!
Thanks! 🙏
Fantastic like always
Why do you use grid over flex for vertically centering the play button? Also, why ring over border? Just trying to get a handle on when to use them when it seems you could achieve it either way?
Grid and flex can both vertically center, and now that grid is available in all browsers, it's mostly a personal preference. Grid is actually shorter using `grid place-items-center` vs `flex justify-center items-center`
As for ring vs border, the default box-sizing in Tailwind is 'border-box', so using border will affect the height/width of the content. With ring, it wraps around the content, so is probably better for things like icons where you don't want to affect the size. Also, you can use ring-offset to give space between content and ring.
I created an example here: play.tailwindcss.com/iz6rCSLraX
@@Kiliman3970 Awesome reply, thank you!
What is the VS Code extension for HTML preview? There's a few but I'm not sure any of them are any good
Awesome video, shows how easy it is to design and mockup with tailwind!
How do you export it to an image easily?
Also, highly recommend not using those little "aha" sound effects towards the end, very weird and jarring.
I pasted my screenshot in the "preview" app, and saved the image 👍 You can also paste it in Figma, Slack, Notion, anything that accepts a "paste" of an image.
Re: fun little sound effects - it's indeed likely weird, but I like to experiment with some fun things and keep viewers surprised. I promise I won't take it toooo far.
Voilà ! Super vidéo comme d’habitude merci beaucoup
Productivity and freedom tailwind
How would you export this to a PDF?
Hello. In which version the w-[230px] is avalible? For me it doesn't work.
wow it's amazing 👍
Awesome - Thank you!
Hey! Could you please reply- what was the *w-[640px]* class?
Just In Time (JIT) mode arbitary value inside square brackets for a custom value.
CSS generated is `width: 640px;`
Thank you very much
Thank you! that is so inspiring
This is what is known as "Going Meta".
I wish I could become this good in Tailwind.
Practice makes perfect, keep at it!
it has very good documentation and easy to learn
does tailwind work on opera mini?
Is the w-[640px] for example built into Tailwind now or is it a plugin/customization? I think it is really cool and will help me for sure with some projects
Ah it was mentioned later in the video. Are they fixed sizes or can you put any sizes in?
It's part of Tailwind CSS JIT mode. It allows you to use arbitrary values in addition to the default design system.
tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
@@Kiliman3970 Appreciate that info. I use Tailwind with JIT on all my SvelteKit projects and never thought of adding arbitrary values like that which would have been great because there has been many a times I've made a specific class just for arbitrary sizes...
@@Kiliman3970 It even takes hex colors, definitely a great thing
@@Protoscribe You can put any size, it's called "arbitrary value" support. It's really powerful, but I'd try to stick to the Tailwind config values in general for design consistency, and only use "magic numbers" for specific situations.
Can anyone please tell me what is aria-hidden here in div?
Thanx in advance.
Protect him he is a GEM
Awesome video +++++++++++++++++ 😃
✨✨✨✨✨✨✨✨✨✨✨
nice 👍
Can anyone tell me which preview extension he is using? 🙄
I'm waiting for someone to answer this.....
It's a custom one we built for ourselves just for these screencasts. Wouldn't be good enough for real work, but it's good enough for us 👍🏻
You can try HTML Preview, or Preview
@@dinhkhanh or vscode Live Preview too
@@TailwindLabs Would it be possible to integrate Tailwind Play as a VS Code extension?
I really loved these thumbnails so I kinda recreated them in Canva for non-commercial (personal) use. But this is great! If coupled with CSS variables, we can automate the creation using Puppeteer.
Haha yep this is exactly what I was thinking of after editing the video - would be cool to feed some data to a script that generates those with puppeteer 👍
I just wanted to know the name of the font you use
Dank Mono ✨
@@simonswiss thanks
Great!!!
👌👌👌
👌👌👌👏🏼👏🏼👏🏼
why do we need that aria-hidden="true" here?
that's just for accessibility purposes
You need to be a hater to dislike this video.
Great video production, code and explanation.
brooowp brooowp xd