loading...
Cover image for Dev.to clone with tailwind CSS

Dev.to clone with tailwind CSS

gillarohith profile image Rohith Gilla Updated on ・2 min read

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

Image
Dev.to

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. Alt Text
  • Phase 2 NavBar Alt Text
  • Phase 3 SideBar Alt Text
  • Phase 4 Listings Alt Text
  • Phase 5 My fav one, Et Voila! Dev.to

Time

The overall time consumed was (calculated using wakatime)
Time
Graphs

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",
      }
Enter fullscreen mode Exit fullscreen mode

Bonus gif :p
Alt Text

Peace ✌🏻,
Rohith Gilla.

Discussion

pic
Editor guide
Collapse
ben profile image
Ben Halpern

Wow, cc @pp

Collapse
pp profile image
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.

Collapse
gillarohith profile image
Rohith Gilla Author

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

Collapse
gillarohith profile image
Rohith Gilla Author

Thanks means a lot 🙌🥳

Collapse
bugsysailor profile image
Bugsy Sailor

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

Collapse
gillarohith profile image
Rohith Gilla Author

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.

Collapse
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻

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.

Thread Thread
gillarohith profile image
Rohith Gilla Author

Wow thanks, will definitely check that out.

Thread Thread
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻

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.

Thread Thread
gillarohith profile image
Rohith Gilla Author

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

Thread Thread
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻

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.

Collapse
blacksonic profile image
Gábor Soós

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

Collapse
gillarohith profile image
Rohith Gilla Author

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

Collapse
blacksonic profile image
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.

Thread Thread
gillarohith profile image
Rohith Gilla Author

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.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Do people forget about mobile these days?

Collapse
gillarohith profile image
Rohith Gilla Author

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 😄

Collapse
bobj2018 profile image
Joshua Rieth

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

Collapse
gillarohith profile image
Rohith Gilla Author

I’m happy to hear that.
Tailwind ftw

Collapse
saurabhdaware profile image
Saurabh Daware 🌻

This is soooo coool Rohith!!!

Collapse
gillarohith profile image
Rohith Gilla Author

Thanks a lot 🙌
It gives morale boost

Collapse
arvindmehairjan profile image
Arvind Mehairjan

I didn't know Tailwind is this powerful. I seriously need to take a look at it.

Collapse
gillarohith profile image
Rohith Gilla Author

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

Collapse
majeo69 profile image
Alex

Wow

Collapse
gillarohith profile image
Rohith Gilla Author

Thank you 🙌

Collapse
vishnubaliga profile image
Vishnu Baliga

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

Collapse
gillarohith profile image
Rohith Gilla Author

Thanks 🙌

Collapse
sergix profile image
Peyton McGinnis

Tailwind is love

Tailwind is life

Collapse
gillarohith profile image
Rohith Gilla Author

Tailwind ftw

Collapse
jgb profile image
Jean Gérard Bousiquot

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

Collapse
gillarohith profile image
Rohith Gilla Author

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

Collapse
adgower profile image
Alex Gower

awesome! Tailwindcss is dope.

Collapse
gillarohith profile image
Rohith Gilla Author

Yo thanks 🙌

Collapse
javaarchive profile image
Raymond

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

Collapse
gillarohith profile image
Rohith Gilla Author

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

Collapse
codesnail profile image
Collapse
gillarohith profile image
Rohith Gilla Author

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 ✌️

Some comments have been hidden by the post's author - find out more