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