I'm developing a frontend application that must be responsive at least for desktop and mobile resolutions.

I'm wondering what's the recommended way to structure the codebase. Searching online various solution I found:

1. using something like tailwind where in every tag I can specify some "responsive" class which activate only at specific breakpoints
2. using @media-queries
3. using libraries like react-responsive

Using approach 1) I feel like the component is very messy and difficult to read: every line, every tag could be rendered or not based on classes applied. Understand what is rendered desktop or mobile side is madness.

Approach 2) is pretty ok but you have the css outside of the component.
Probably it's right to have the css outside the component for someone but I think that react encourage to encapsulate even this kind of aspect inside the component, right?

Approach 3) is basically like the approach 2) but encapsulating it in the component.

What it's not clear to me is:

• are these the only approaches that are recommended nowadays?
• when using something like 1) or 3) should I create N different version of the same component, where N is the number of breakpoints that I should support? Or the component should be only one with conditional logic that use different styles based on the resolution?

Duplicate the components makes all more clearer to read but has the downside that maintain all these duplicates could be very difficult (every edit, every fix, should be copy-pasted in every component). At the same time using only one component with "responsive classes" is harder to read even if you have the advantage to maintain only one class.

What do you think?

Thanks