Rohith Gilla

Posted on May 4, 2020 • Edited on May 5, 2020

Dev.to clone with tailwind CSS

#showdev #react #webdev #javascript

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.

Latest comments (38)

Arpit • Jun 28 '20

wow @gillarohith

Rohith Gilla • Jun 28 '20

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 Bousiquot • May 7 '20

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

Rohith Gilla • May 7 '20

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

Vishnu Baliga • May 5 '20

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

Rohith Gilla • May 5 '20

Thanks 🙌

Alex • May 5 '20

Wow

Rohith Gilla • May 5 '20

Thank you 🙌

Peyton McGinnis • May 5 '20

Tailwind is love

Tailwind is life

Rohith Gilla • May 5 '20

Tailwind ftw

Joshua Rieth • May 5 '20

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

Rohith Gilla • May 5 '20

I’m happy to hear that.
Tailwind ftw

Bugsy Sailor • May 4 '20

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

Rohith Gilla • May 5 '20

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 • May 5 '20

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 • May 5 '20

Wow thanks, will definitely check that out.

Elliot Derhay • May 5 '20

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 • May 5 '20

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

Elliot Derhay • May 5 '20 • Edited

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.