DEV Community

Rohith Gilla
Rohith Gilla

Posted on • Edited on

I replicated youtube design using tailwind CSS

TLDR;
Github repo Link
Live https://youtube-tailwind.netlify.app
GIF
Youtube

Image
YouTube

We will be cruising through the following topics

  • What the heck is tailwind?
  • What did I build?
  • How should I set up, design using tailwind!

What the heck is tailwind?

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. I have taken this definition from here.

The documentation is really beautiful, I personally finished reading documentation.

What did I build?

Once I completed scanning the docs, the best way to check oneself is to do some project. So I decided to replicate YouTube. It was decent enough, took some time initially later cruised well.

The overall time consumed was (calculated using wakatime)
Time

  • Step 1 Layout Alt Text
  • Step 2 Top Nav Alt Text
  • Step 3 Side Nav Alt Text
  • Step 4 Et Voila! Alt Text

How should I set up, design using tailwind!

Stay tuned coming up in future posts.

Peace ✌🏻,
Rohith Gilla.

P.S: I am planning to replicate a few other websites too if you have any suggestions please comment.

Top comments (2)

Collapse
 
sergix profile image
Peyton McGinnis

Tailwind > everything else

Collapse
 
gillarohith profile image
Rohith Gilla

True, I am enjoying it.