DEV Community

Cover image for Google UI Clone in HTML and Tailwind CSS

Google UI Clone in HTML and Tailwind CSS

Rohit Yadav on March 04, 2024

Introduction: In the world of web development, creating clones of popular websites is a fantastic way to practice and improve your skill...
Collapse
 
moopet profile image
Ben Sinclair

This is a good way to learn Tailwind, but not HTML - approaches like these throw away any semantic content in favour of div elements everywhere, and I think it's a much better idea for people starting out to learn how to construct a document first, rather than see it as some optional "nice to have" they might do later.

I realise it's not the point of the exercise, but if you style semantic elements then you don't need any of the Tailwind stuff anyway.

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

if you style semantic elements then you don't need any of the Tailwind stuff anyway

Using semantic elements is not related to using Tailwind - semantic elements should be used with Tailwind and can even make applying the Tailwind styles easier.

Collapse
 
moopet profile image
Ben Sinclair

But they aren't, though, in the real world. People who use Tailwind almost exclusively use it with div soup since you're encouraged to make a lot of wrapper divs.

Thread Thread
 
terabytetiger profile image
Tyler V. (he/him)

I'm not sure why you think that Tailwind encourages creating "a lot" of wrapper divs?

Since it's a utility framework anything it's doing is transferable to using style="" or a class on the same element where it's applied, so any "div soup" is still just an issue with the HTML directly, not Tailwind.

Thread Thread
 
moopet profile image
Ben Sinclair

You're right in principle, but if you look at anything that's been styled with Tailwind you'll see what I mean.

Thread Thread
 
terabytetiger profile image
Tyler V. (he/him)

You're still putting the blame on Tailwind when the issue is with HTML.

It's fine if you don't like Tailwind because of whatever reason. But that doesn't mean that anyone that uses it can't write clean HMTL.

Thread Thread
 
moopet profile image
Ben Sinclair

Anyone can write clean HTML. The people who are writing things like Tailwind (and a bunch of other things, like React components for example) are typically not doing that, though. Almost all the Tailwind tutorials you'll find use DIV soup, and people starting out with it just follow suit.

Thread Thread
 
terabytetiger profile image
Tyler V. (he/him)

Let's stop making assumptions about people that use specific tools - Thanks.

Collapse
 
rohitnirban profile image
Rohit Yadav

Thanks, Ben! I'll make sure to include more emphasis on semantic content in future tutorials. Appreciate your feedback!

Collapse
 
meenakshi052003 profile image
Meenakshi Agarwal

Your Google UI Clone tutorial is fantastic! The clarity in instructions makes it super easy. Including a bit more detail on Tailwind CSS classes would have been helpful for a deeper understanding.

Collapse
 
rohitnirban profile image
Rohit Yadav

Thanks, Meenakshi! I'll take care of it.

Collapse
 
getsetgopi profile image
GP

Any experienced frontend developer will never use Tailwind.

Collapse
 
get_pieces profile image
Pieces 🌟 • Edited

This is a great article and an amazing way to understand tailwind.

Collapse
 
chitwanrana profile image
Chitwan Rana

I've gone through your blog and this is very helpful and informative for learner and beginner like me . Expecting more informative blog like this.

Collapse
 
rohitnirban profile image
Rohit Yadav

Thanks, Chitwan! It means a lot.

Collapse
 
abhilaksharora profile image
abhilaksh-arora

Really helpful for beginners to start with this tutorial, nice work Rohit! Waiting for more informative blog like these.

Collapse
 
rohitnirban profile image
Rohit Yadav

Thanks, Abhilaksh! More helpful blogs coming soon!