Building a YouTube Thumbnail with Tailwind CSS

In this video, we'll build the KZbin thumbnail you just clicked on, from scratch, using Tailwind CSS.
Tailwind Play: play.tailwindcss.com/sQlxw7MlB2

[@valtism]

Appreciate that you've included accessibility into this as a demonstration of best practice even though it isn't needed here specifically.

[@Delba]

Of course the Tailwind thumbnails are actually built with Tailwind! 🔥

[@simonswiss]

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 🙌

[@Dave-oi4fx]

@@simonswiss it's a joke lmao

[@simonswiss]

Don't mind me re-watching my own videos 2 years later, and being in awe of how cool they are 👁👄👁

[@adeyudhapratama4314]

I'm a backend and really interest with frontend after watching all video from this channel, cool

[@bakiwebdev]

i never get bored with tailwind CSS, Thank you so much

[@can-genc]

Why learn photoshop when you can just use tailwind at this point, amazing work as always

[@cool14tsanzol]

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.

[@wasimshahzad2720]

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.

[@faldikn]

Tailwind is great, but...this guy is AMAZING 🌟

[@MistaT44]

No words! Absolutely amazing

[@yesayasoftware]

Your doing a great job, your content is great and fun at the same time.

[@lucasfranzolin]

i absolutely love this channel!!

[@deephousefridays1911]

This was amazing, learned a lot! Thanks

[@simonswiss]

Glad to hear it's helpful!

[@himanshusrivastava931]

This guy is lit🔥

[@sasicodes]

Amazing video, as usual 🔥

[@ngechumungai8420]

Master at work 🔥

[@aliftaufikhurrahmataminudd9040]

It even includes some insight of creating element that's sr friendly

[@vinsonyung537]

No question this guy is professional in Tailwindcss :)

[@HelloWorld-fg2nm]

Wow I learned a lot from this video, well done!

[@ebouls9210]

Voilà ! Super vidéo comme d’habitude merci beaucoup

[@QueeeeenZ]

You're watching a master at work!

[@rojonali3374]

You are really the fun guy.

[@dibbyo456]

This is sick. ❤‍🔥

[@simonswiss]

Honestly this was of the most fun videos I put together - really enjoyed that one!

[@aliwolfi816]

just the 'broop' word XD you're amazing man

[@mukut5ul]

Great video

[@barbapapazes]

Whooo amazing!

[@wahyusa]

Thank you! that is so inspiring

[@CARUSAR21]

Fantastic like always

[@EricTirado]

I would have never thought of making a youtube video thumbnail with code. ^_^

[@spicybaguette7706]

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

[@aguspray]

Your explaination is very clear! Please make video about tailwind best practice, such as mobile first and etc 😀

[@technical157]

i love your videos. please dont stop making them.

[@simonswiss]

I never wanted to stop!

[@tahak7411]

This is cool af

[@yo1414]

Awesome - Thank you!

[@md.najmulhasan8774]

wow it's amazing 👍

[@amirrahman853]

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

[@ShajidHasan]

Great video Simon!

[@simonswiss]

Thanks! 🙏

[@pavanakumardr152]

Productivity and freedom tailwind

[@jagjens]

Gonna use the concept to build nice images and be more visual on twitter 😄

[@deekshantwadhwa]

This is what is known as "Going Meta".

[@justingolden21]

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.

[@simonswiss]

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.

[@ahmedutuber]

nice 👍

[@sornt]

Great!!!

[@mohamedyoussef8835]

Awesome video +++++++++++++++++ 😃

[@simonswiss]

✨✨✨✨✨✨✨✨✨✨✨

[@TimKariuki]

I wish I could become this good in Tailwind.

[@simonswiss]

Practice makes perfect, keep at it!

[@baneneba3477]

it has very good documentation and easy to learn

[@ibnelaiq]

Protect him he is a GEM

[@iDarthGigi]

Could you share the Visual Studio Code settings, plugins and themes that are being used in these videos?

[@narendrapatwardhan68]

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.

[@simonswiss]

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 👍

[@tobiassteckenborn5827]

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.

[@manuelcardona911]

👌👌👌

[@nzube]

👌👌👌👏🏼👏🏼👏🏼

[@eminalizade8998]

Why not gap instead of space at 3:30?

[@dmarksbarber]

What is the VS Code extension for HTML preview? There's a few but I'm not sure any of them are any good

[@Protoscribe]

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

[@Protoscribe]

Ah it was mentioned later in the video. Are they fixed sizes or can you put any sizes in?

[@Kiliman3970]

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

[@Protoscribe]

@@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]

@@Kiliman3970 It even takes hex colors, definitely a great thing

[@simonswiss]

@@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.

[@Balance-8]

How would you export this to a PDF?

[@andyjeffries]

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?

[@Kiliman3970]

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

[@andyjeffries]

@@Kiliman3970 Awesome reply, thank you!

[@elenadomingos7632]

Hello. In which version the w-[230px] is avalible? For me it doesn't work.

[@felixmilome]

does tailwind work on opera mini?

[@sounak2009]

Hey! Could you please reply- what was the *w-[640px]* class?

[@thevividversatilechannel4807]

Just In Time (JIT) mode arbitary value inside square brackets for a custom value. CSS generated is `width: 640px;` Thank you very much

[@ESC.eatsleepcode]

Can anyone please tell me what is aria-hidden here in div? Thanx in advance.

[@helitonnordt799]

You need to be a hater to dislike this video. Great video production, code and explanation.

[@yusha790]

brooowp brooowp xd

[@himanshusrivastava931]

Can anyone tell me which preview extension he is using? 🙄

[@Dave-oi4fx]

I'm waiting for someone to answer this.....

[@TailwindLabs]

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 👍🏻

[@dinhkhanh]

You can try HTML Preview, or Preview

[@Dave-oi4fx]

@@dinhkhanh or vscode Live Preview too

[@larrasu]

@@TailwindLabs Would it be possible to integrate Tailwind Play as a VS Code extension?

[@andresdosantos5310]

I just wanted to know the name of the font you use

[@simonswiss]

Dank Mono ✨

[@andresdosantos5310]

@@simonswiss thanks

[@chanandlerbong6176]

why do we need that aria-hidden="true" here?

[@binitrupakheti4246]

that's just for accessibility purposes