RAPIDLY Create UI Designs in Minutes with Tailblocks

The JavaScript Bootcamp (Huge discount, Limited to 50!): bit.ly/2A7wgwT
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we'll be checking out Tailblocks. It uses TailwindCSS as the backbone, and allows you to quickly grab predefined code snippets for common UI design patterns. I'm going to show you how you can use it to piece together a landing page in minutes, and then make customizations.
Tailblocks:
mertjf.github.io/tailblocks/
TailwindCSS:
mertjf.github.io/tailblocks/
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Do you use anything similar to Tailblocks to create UIs?

[@sumandevulapalli7042]

I use bootstrap and customise few of them all the time i love it but this looks cool i will try it later tonight

[@justingolden21]

Reminds me of Figma + Bootstrap. I've used a lot of Bootstrap and been meaning to try Figma more. This kinda looks like the best of both worlds, super fast, easy efficient, and looks good too.

[@digigoliath]

I use Bootstrap. Tailblocks is fast & cool. Interesting.

[@MaximilianBerkmann]

Figma although Tailbocks seems much better for some use cases. I wonder if there's a Quasar and Vuetify equivalent.

[@ibernohoffmann5427]

I found Tailblocks couple days ago.. its really awsome.. but i'm tryng to do by myself to learn the Tailwindcss principles..

[@michaelseidel1904]

Just built a landing page with Tailwind and feel betrayed that I didn't know of the blocks earlier, haha. Thank you man, you're the best

[@justingolden21]

I like that it's one of the few Figma type of softwares that actually provide code AND it's not a mess. The easy CDN and paste looks nice to me, and the fact it's got Bootstrap-like css classes looks good. Liking it so far, might actually have to give this one a serious go. I really like that each one is its own card and you can easily keep track of them through lots of giant HTML, and style it as you did in the video. Awesome vid as always.

[@josephjojo756]

Wow, this is really cool. I was struggling a lot to design my blog site. This solution seems promising. I'll definitely try this out. Thank you so much for sharing this Gary!

[@jacquesduplessis6175]

Excellent find! I've been looking at more tailwind resources as I find it super usefull. Thanks

[@georgevarelas5073]

Gary, your videos create new roads in my mind. I will send you very soon my site to check it and tell me your opinion. Thank you for the inspiration!!!

[@CreepToeJoe]

Nice work with the lighting! A very eye-pleasing gradient!

[@Joshfw892]

Great vid, thanks Gary. I looked at tailwind a while a go but found the set up config with Angular to be too complex. This particular package of it seems like a game changer!

[@speedhaak]

Ohhh, can't wait to try this! Cheers Gary :)

[@josuezamirnarroabanto5865]

Came here from your collaboration on Traversy Media's channel. You have such great videos!

[@joshuakalu4777]

Amazing vid! It looks amazing 😍.

[@digigoliath]

For non-designers, like me, this is awesome. I am using Bootstrap though.

[@matzesox]

The anchor's don't have a pointer cursor because they don't have a *href* attribute. Once that would be added, the pointer will be there again. Great video, I really like Tailwind and these blocks are super handy!

[@_vikramhegde_]

Great Content Gary !! Also please do a video about the new Framer Web. I want to know your opinion about it

[@pavantripathi1890]

Thanks for the video!

[@vinla8949]

Great tutorial! Thanks

[@mohsinyamani5497]

Nice! Thanks for sharing. Your tailwind.css link in the description needs to be updated.

[@abdelrhmanhussien377]

You are amazing as usual

[@BrandonMcConnell1029]

Couldn’t you have changed the class to another present gray for the footer copyright bar, like .bg-gray-900 that’s already included in the color scheme?

[@yakovkemer5062]

First like for Ibanez RG on the wall, second for amazing content

[@omarreal31]

Great stuff Gary!! However, There is an unnecessary horizontal scroll on smaller screens :) You should add {overflow: hidden} to .light-bg

[@MithilaMalinda]

Thank you for this

[@rudijstar]

Great content, thank you.

[@abdul-UIUX]

Great great stuff!!!

[@digitalminister5687]

Hello! Do you already have a video about social media logos, if no could you please tell us about the copyright stuff and what other options there are?

[@rossanabenati8859]

Nice video!!

[@kshitijtapre]

Are there similar design to code resources for other frameworks?

[@DDbenkoDD]

This must be the most amazing thing I've seen on this channel. Tailwind FTW!

[@alexdith9024]

As always another video with useful content. Awesome.. Can you please fix the TailWind links on the description?

[@kaypakaipa8559]

This is dope.

[@OhluhKayTall]

laughed way harder than I should've from the thumbnail. Tailblocks does look hella promising.

[@ikhwataandypratama6626]

very nice !

[@snakone]

i personally won't use this to create UI, instead to get some inspiration, their designs are pretty good, thanks for sharing

[@elfridhasman4181]

Thank You😊😊😊

[@Fliteska]

Tailwind has position classes already

[@khaledoghli1894]

The 2 links in video description are the same. and thank you so much i really love your videos. and i hope some day you see my website and give me your suggestion to make it better to find better job.💙

[@swapond]

Thanks sir

[@cardsper]

Not based in Bootstrap; Structured to be easily customizable at the core; It's open source. Tailwind is the best!

[@marudhuraj6709]

Super design

[@sidisidahmed9081]

OH I was thinking to create an app like that

[@crazyhormone3987]

Can you please answer me that how can i give the space to write user or to myself to write any article on the website and post there..and also that how can i register my website so that i can share the url to my friends.. please reply 🙏

[@crazyhormone3987]

Please answer sir

[@TheRemnant108]

how do I change the logo ?

[@kirankumaryt7026]

We need a guitar tutorial as well! Btw great content!👍🔥

[@weltmeister]

you should check out storybook if you didn't already

[@spartalgaming194]

how to change that logo

[@rashmigupta5121]

Hello will you teach us marvel prototype

[@bookwormhead]

Steal... Love it..will definitely use this

[@candi2Love]

👍👍

[@afaque.]

how to put images in those?

[@afaque.]

just kidding but thanks anyways

[@nayeemuddin4625]

Does tailblocks allows us to create Admin panel ui??

[@nice.540]

no.

[@nayeemuddin4625]

@@nice.540 can you suggest any by which i can create admin dashboard ui??

[@nice.540]

@@nayeemuddin4625 Just use flex box. There are few designs out in internet for you to use, search tailwind components and you will find them. Alternatively, check out Adam Wathan (Tailwind's creator's channel kzbin.info/door/y1H38XrN7hi7wHSClfXPqQ ) for some design live stream records.

[@michaelrobinson5981]

If you're looking for something non-free, I'd highly suggest Tailwind UI (tailwindui.com/) since it by the creators of tailwindcss and supports its development. Also, you should definitely NOT use the CDN version of tailwindcss (for a real project) - there's thousands of classes generated that you're probably not using. The difference is over 200x improvements in size - the cdn version is a few mb while a purged version I used is 15k

[@user-ww8gy1op6i]

Does anyone know if is it free?

[@drevantonder]

Nice video! Tailblocks looks really good. Tailblocks is like Tailwind UI tailwindui.com/ (which is made by the creators of Tailwind CSS) Also, when using Tailwind CSS, you generally don't need to write your own CSS. All the overrides you did could have been done with Tailwind CSS classes. (Except for the font change)

[@MaximilianBerkmann]

Good point about TailwindUI and writing CSS, however, some of the components are only available when you pay $149-249.

[@gfrsolutions8042]

.relative is already a tailwind class

[@DesignCourse]

Great minds think alike? 🤣

[@gfrsolutions8042]

True story 😂

[@casperengelmann4575]

The changes made in the main.scss file greatly goes against everything TailwindCSS tries to solve. Please do not overwrite utilities as it was done in this video. Go ahead and teach/learn how to use Tailwind instead.

[@cahva2]

Yeah have to agree. I was like: what is he doing!!! 😀

[@BrandonMcConnell1029]

Overriding the CSS definitely isn’t against Tailwind philosophy. Steve Schoger, one of it co-founders and co-creators actually encourages it. **but yes manually overriding a Tailwind preset class is a big no-no, especially when there are already Tailwind classes set up to do exactly that, namely .bg-gray-900

[@ibernohoffmann5427]

In tailwindcss you can make you own theme easely with tailwind config file, the bg-colors can change using the same utilities classes ex bg-gray-200 to bg-gray-800 .. the documentation can help you to increase the layout...

[@tanzimibthesam5861]

@@ibernohoffmann5427 yup and also use it like normal CSS like declare a new class and compile it to output.css

[@makemoneyrelax]

is this bootstrap 4? Or some specific building system?

[@zHqqrdz]

It's tailwind

[@atlow2543]

Tailwind isn't bootstrap. But it works.. kind of similarly? The main difference is that Bootstrap focuses on building out specific components, e.g. a nav bar, or a card. While tailwind is primarily focused on taking CSS properties and applying them through easy to use html classes.

[@MaximilianBerkmann]

It's TailwindCSS, he literally said that a couple times in the video.

[@joseflorez6892]

Gary, you always says "dont use bootstrap". Why I should use this one?

[@jenstornell]

Tailwind is far from bootstrap. With bootstrap you are quite limited by the blocks. With tailwind there really are no limitations. Watch videos by Adam and you will see. The more you see, the more you will like it.

[@MaximilianBerkmann]

Bootstrap is a CSS Framework. TailwindCSS is a Utility-first low-level framework which is essentially more a utility library of CSS classes. In other words, with Boostrap (same goes for others like Vuetify), you're stuck with mid-to-high level HTML/CSS components where low-level customisation is tricky (speaking from experience). TailwindCSS on the other hand just provides you with a handful of CSS classes you could use as building blocks for your HTML/CSS components.

[@DreamingDolphing]

Nice idea for rapid development of prototype app, but css customization is hell.

[@mangodesc9851]

GAY

[@JamesWelbes]

0:09 rude 🤣

[@michealwaldrup4357]

Heads up, you linked to Tailblocks twice in the description. Didn't link Tailwind.

[@alshezawi2010]

Every time when i see number of css classes that you have to put in an element when you use tailwind i said i will continue with bootstrap 🤦‍♂️.

[@LabhamJain]

Did Anyone Noticed On 0:09 😂😂😂

[@louissanjohkala2784]

tried my best but I'm not the first :(

[@Zain-cs9kn]

Third Comment!

[@JamesWelbes]

SHOW ME YOUR TUTS

[@jenstornell]

I must be tired. I read "tits". 😱

[@ManeelxAkosAdor]

Why not a building block platform of plain css components instead of al these stinky frameworks?

[@omaryassir5885]

Second comment

[@mahesh4274]

First comment..

[@lmnzxx]

Okey, you got it

[@ghouston2712]

Sorry, I know you're using the cdn version but this is really bad advice with the custom scss file, I understand why you're doing it for this video but anyone else reading this should not use this method. You will get laughed at.

[@real-oppenheimer]

First video of yours I have to dislike as you complete misrepresent how Tailwind is supposed to be used. Everything you did could've been done with Tailwind's classes, you writing your own goes exactly against why Tailwind is so great.

[@groovebird812]

This makes no sense. Why can't we use our own classes? I don't know why tailwind is so great. Is it great to write inline css? Is it great to search and replace all templates if my colors are changing? Is it great to repeat all twenty classes for every list item?