DEV Community

Cover image for Dropdown with CSS / Tailwind

Dropdown with CSS / Tailwind

Tayfun Erbilen on July 06, 2021

1- CSS Way In this article, I would like to show you, how to create dropdown menus with CSS. For do that, we will use :focus-within. New...
Collapse
 
samael3 profile image
samael3

I'm confuse bro use a framework or classical css
Pls give me a reply.iT will help me a lot

Collapse
 
hasnaindev profile image
Muhammad Hasnain

Just become proficient in CSS. Internet has a lot of bad advice. People promote tools to sell tutorials and get views on their content, as a beginner, do NOT jump the hype train. I've seen a lot of passionate developers fail at finding jobs even though they learned React, React Native, .NET, basically the full stack and were proficient at non.

Just stop focusing on damned tools. Bootstrap, jQuery, React, Vue, Tailwind all of them are something you should avoid. Become proficient at CSS and JavaScript because any hyped tool or technology is built upon these basic languages.

You good at CSS? Good. CSS frameworks would automatically become a second nature. Good at JavaScript and have a strong grasp of ESNext? Good. The first framework you learn may take some time but the others, you can learn in a week or a month. Simple as that.

Collapse
 
anstroy profile image
Aus G

Well, you have a point, but remember that many developers are full-stack devs, and there, CSS just plays a small part, so is fine if you use Bootstrap or those frameworks just to get the job done and focus on all the things on the backend like db, auth, serialization, security, etc.

But if you want to focus on front end dev, CSS has to be your bread and butter yeah.

Thread Thread
 
hasnaindev profile image
Muhammad Hasnain • Edited

Makes sense but this looks like an oversimplification. Suppose, you are a full-stack developer who ends up working on WordPress, Shopify or similar CMS type systems. These systems come with their own backends that you can only modify and tweak at best.

Not being excellent at frontend has hurt my career. You can go freelancing and clients wouldn't really care how well written your backend and even frontend codes are, they care about what they can see. They want pixel perfect results that frameworks cannot provide if the design is too dynamic.

I stick with my original point. Know the basics, have a strong foundation. Learning frameworks is easy and a new one comes out every day. I'm good at JavaScript and when the time came, I picked up Vue and Svelte without any trouble.

I hope you got my point. I don't advice to be anti framework but if you don't know your stuff, you'll be a mediocre/average developer. Seen far too many framework hyped developers who spend more time then required to solve problems just because they didn't knew the basics.

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen • Edited

It really depends of what you need actually. I'm using tailwind with react mostly. I'm creating components for all my needs. And I don't need to write CSS for that 'cause tailwind really works fine and it provides an excellent codebase for my components.

So also tailwind has a purging system, you don't need to use all tailwind library, you can use what ever you used. For development process, it really helped me to getting fast. But you might be little slower while learning tailwind utilities :) I recommend learn CSS deeply first, then use tailwind for freedom :)

Collapse
 
samael3 profile image
samael3 • Edited

Thanks bro
I have another question bootstrap or tailwind css
I know css very well
And saas is better than raw css

Thread Thread
 
tayfunerbilen profile image
Tayfun Erbilen

I think we can't compare them, because it is not same.

Bootstrap has some cool stuff, yes. I tried both of them, and I decided to use tailwind.

If you try this example on bootstrap, you will understand why I don't liked it. Because, I don't want to use their HTML structure or limited utilities. I need real codebase like tailwind. With tailwind, I feel free. With bootstrap, I feel stuck.

But of course these are my opinion, not investment advice :)

Collapse
 
rks0001 profile image
rks0001

Doesn't matter if you are getting the results you want . But having knowledge of CSS is always good.

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

true, but to get faster, we need this kind of cool works.

Collapse
 
venelinn profile image
Venelin

CSS Way is the best/right way! No frameworks, no problems !

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

I was thinking like you, then I started to use SASS instead of regular CSS and a couple months later I didn't want to use regular CSS again :) And now, with tailwind I don't need to write SASS or regular CSS either.

But of course, I learned CSS deeply first :) Then I got lazy maybe little bit :)

Collapse
 
venelinn profile image
Venelin

When I said CSS way I meant no Tailwind, CSS/SCSS kind of the same thing

Collapse
 
metalmikester profile image
Michel Renaud

I'm always impressed by everything that can be done in CSS. Too bad I suck at it. lol

 
hasnaindev profile image
Muhammad Hasnain

Thanks for the detailed reply and I totally agree. In fact, when I joined my current company as a WordPress developer, I didn't knew anything about WordPress and not even PHP but I had a strong foundation and so, I got up and running in a month.

Later priorities changed. I was handed the most important projects in company that generates the most revenue. Both of those Shopify based websites generate 7 figures a month. One uses a complex build system along with Vue and the other is simple, in a sense that the developer who previously worked on it before the project was handed to us had no idea what good code or bad code was, absolutely terrible. In that, I'm working with Svelte.

So, you see? I though I should've been explicit that learning new technologies isn't bad but if your foundation is strong enough, you can pick anything at anytime, without any hassle.

Collapse
 
mares29 profile image
M29 • Edited

I really like only CSS approach. Sadly this doesn't work in Safari.

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

safari is the new IE :/

Collapse
 
hemanthhskb profile image
hemanthhs-kb

Liquid syntax error: Unknown tag 'url'

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

You can also check out this Tailwind CSS dropdown from a component library. You need to include a JS script, though.

Collapse
 
argonauta profile image
Riccardo Tartaglia

If you use React, you can use this: windy-docs.vercel.app/docs/compone...

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

I prefer headlessui instead of this :)
headlessui.dev/react/menu