Dev.to clone with tailwind CSS

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

Image

We will be cruising through the following topics

• What is tailwind? (Recap)
• What did I build?
• Time
• Custom additions to tailwind.js

What is tailwind? (Recap)

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 stunning, I personally finished reading documentation.

What did I build?

After a good success with replication of youtube. So I decided to replicate Dev to. It was close enough I feel. It’s only the desktop version of the website.

Progress

• Phase 1 As I always prefer, I start with the layout.
• Phase 2 NavBar
• Phase 3 SideBar
• Phase 4 Listings
• Phase 5 My fav one, Et Voila!

Time

The overall time consumed was (calculated using wakatime)

Custom additions to tailwind.js

This are the custom colors used in the development process.

dev: {
        gray: "#1a2634",
        body: "#0d1219",
        text: "#f9fafa",
        link: "#dde0e2",
        teal: "#1CB3A6",
        tealPri: "#26d9ca",
        hoverTags: "#868EE7",
        searchBox: "#2E3A48",
      }

Bonus gif :p

Peace ✌🏻,
Rohith Gilla.

Comments

[Arpit]

wow @gillarohith

[Rohith Gilla]

Hey thanks a lot 🙌
Looks like you are a python developer, please do check out my new series on python packages 📦
I hope you will find them interesting ✌️

[Jean Gérard Bousiquot]

Really nice! I've started using Tailwind a few days ago and I'm enjoying it. :D

[Rohith Gilla]

Thanks 🙌
Wow that’s great you will definitely love it

[Vishnu Baliga]

Amazing, Good effort!
Tailwind is awesome, always been a huge fan of it.

[Rohith Gilla]

Thanks 🙌

[Alex]

Wow

[Rohith Gilla]

Thank you 🙌

[Peyton McGinnis]

Tailwind is love

Tailwind is life

[Rohith Gilla]

Tailwind ftw

[Joshua Rieth]

I am a fan of TailWind. It has helped me understand the positional element.

[Rohith Gilla]

I’m happy to hear that.
Tailwind ftw

[Bugsy Sailor]

I'm new to Tailwind, but a bit confused. Why is the CSS file 1.6MB?

[Rohith Gilla]

Hey, so we are using the default config along with custom config, we can reduce the size by deleting the colours from tailwind.js file.

[Elliot Derhay]

File size can also be reduced by removing varients you don't need. Also, if you're comfortable with something like Purgecss, that'll remove every class you're not using. That'll really reduce file size.

[Rohith Gilla]

Wow thanks, will definitely check that out.

[Elliot Derhay]

Purgecss is amazing. But do make sure you have it set up correctly to check source files. That's how it determines what classes you're using.

Depending on what tools you build with, you may also need to whitelist some selectors. That should be covered in the Purgecss docs.

[Rohith Gilla]

Oh cool thanks for the heads up, will be ready for it.

[Elliot Derhay]

Oh, I need to add 1 more thing: I think Purgecss only runs when the environment is "production". This is to prevent issues in development if you change CSS classes in your markup without regenerating your CSS.

[Alex Gower]

awesome! Tailwindcss is dope.

[Rohith Gilla]

Yo thanks 🙌

[Raymond]

Great job. Have you tried glitch.com, you can get quick previews of what your HTML looks like.

[Rohith Gilla]

Thanks a lot for the appreciation.
No I haven’t tried it, will definitely check it out.

[Saurabh Daware 🌻]

This is soooo coool Rohith!!!

[Rohith Gilla]

Thanks a lot 🙌
It gives morale boost

[Rohith Gilla]

Yes, definitely.
The documentation is amazing 🙌
I wrote a post too on how to setup your react dev env and also created a template repo on GitHub, I hope that helps
Thanks

[Vitor Hugo]

really cool, but I think one of the main reasons for using something like tailwind is the ability to make responsive layouts without having to write CSS and it looks like you forgot it

(why this white bar?)

[Rohith Gilla]

Hey my intention was to replicate only the desktop version of the site. If you want to work on the mobile version please let me know 😄
Thanks for the appreciation btw 🙌

[Pacharapol Withayasakpunt]

Do people forget about mobile these days?

[Rohith Gilla]

Hey my intention was to replicate only the desktop version of the site. If you want to work on the mobile version please let me know 😄

[Gábor Soós]

A comparison between the size of stylesheets and rendering times would be interesting also,
Nice replica 👍

[Rohith Gilla]

Thanks for the appreciation.
I didn’t understand exactly what you want me to compare. Can you elaborate it.
Thanks
Gilla

[Gábor Soós]

The size of the stylesheets of the current site and the one with Tailwind css.
How fast is rendering with it.

[Rohith Gilla]

Oh gotcha, but since it’s only UI design and not making any api calls, we shouldn’t compare rendering I feel.
But yeah we can definitely compare the style sheet sizes.
Thanks for the idea will do it from next time.

[Ben Halpern]

Wow, cc @pp

[Paweł Ludwiczak]

Really cool proof of concept! Tailwind is super powerful, I've been a huge fan for a while.

Also, recreating existing products/projects is the best way to learn - not only in dev world but also in design.

[Rohith Gilla]

Thanks a lot 🙌
Yes accepted replicating existing product is the best way to learn something.
I replicated YouTube also
dev.to/gillarohith/i-replicated-yo...
Tailwind ftw 🙌
Thanks
Gilla

[Rohith Gilla]

Thanks means a lot 🙌🥳