From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Mobile-first best practices

Mobile-first best practices

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Mobile-first best practices

“

Welcome back. Let's revisit and summarize the mobile-first approach. This approach allows Tailwind to optimize the experience for most users, since majority of the users use mobile devices. We can avoid style override conflicts. And we can keep the initial CSS minimal and faster. So, this approach of Tailwind by going mobile first helps a lot since nowadays websites has to be responsive and needed to response on multiple screen sizes. Let's see some of the best practices that we can follow or we should be doing. start with the simplest base style. That way, you can be applying CSS that should be good to go in most of the cases. We can then add complexity with breakpoints only where it's needed. Don't need to define it for the simplest structure at all. We should be using hidden, block or flex wherever necessary conditionally. Let's see an example for that. Over here, we have two divs defined. We can assume that they are mobile and desktop menus. For the mobile menu, we have the block…

Contents