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
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.
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.
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 👍
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.
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
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 👁👄👁
Appreciate that you've included accessibility into this as a demonstration of best practice even though it isn't needed here specifically.
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.
I'm a backend and really interest with frontend after watching all video from this channel, cool
Tailwind is great, but...this guy is AMAZING 🌟
No words! Absolutely 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 :)
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
Productivity and freedom tailwind
You're watching a master at work!
This was amazing, learned a lot! Thanks
Glad to hear it's helpful!
just the 'broop' word XD you're amazing man
I would have never thought of making a youtube video thumbnail with code. ^_^
You are really the fun guy.
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
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.
This is sick. ❤🔥
Honestly this was of the most fun videos I put together - really enjoyed that one!
Whooo amazing!
This guy is lit🔥
Gonna use the concept to build nice images and be more visual on twitter 😄
Awesome - Thank you!
Great video
This is cool af
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.
i absolutely love this channel!!
Your explaination is very clear! Please make video about tailwind best practice, such as mobile first and etc 😀
I wish I could become this good in Tailwind.
Practice makes perfect, keep at it!
it has very good documentation and easy to learn
Master at work 🔥
i love your videos. please dont stop making them.
I never wanted to stop!
Voilà ! Super vidéo comme d’habitude merci beaucoup
Amazing video, as usual 🔥
Wow I learned a lot from this video, well done!
Could you share the Visual Studio Code settings, plugins and themes that are being used in these videos?
This is what is known as "Going Meta".
Fantastic like always
Great video Simon!
Thanks! 🙏
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 👍
nice 👍
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
Thank you! that is so inspiring
wow it's amazing 👍
Protect him he is a GEM
Great!!!
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.
How would you export this to a PDF?
What is the VS Code extension for HTML preview? There's a few but I'm not sure any of them are any good
Why not gap instead of space at 3:30?
Awesome video +++++++++++++++++ 😃
✨✨✨✨✨✨✨✨✨✨✨
Hello. In which version the w-[230px] is avalible? For me it doesn't work.
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!
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
does tailwind work on opera mini?
👌👌👌
You need to be a hater to dislike this video.
Great video production, code and explanation.
👌👌👌👏🏼👏🏼👏🏼
I just wanted to know the name of the font you use
Dank Mono ✨
@@simonswiss thanks
Can anyone please tell me what is aria-hidden here in div?
Thanx in advance.
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?
brooowp brooowp xd
why do we need that aria-hidden="true" here?
that's just for accessibility purposes