From the course: Tailwind CSS 4 Essential Training
Join today to access over 24,800 courses taught by industry experts.
Understanding the mobile-first approach - Tailwind CSS Tutorial
From the course: Tailwind CSS 4 Essential Training
Understanding the mobile-first approach
- [Instructor] Most people today browse the web on their phones rather than on desktops. So it's more important than ever to design websites that work seamlessly on smaller screens first. Traditionally, we developers have used the desktop-first approach where we style a website to optimize for larger screens first. Then using media queries, we change the styles for smaller screens. Let me show you a simple example. Consider this heading on the page. If you notice, this heading size is perfectly optimized for a desktop layout. So we have added font-size as 4rem. Now to make it smaller for smaller screens, we use the max-width media queries like media screen and max-width, setting a device width size, like let's say 800 pixels. So if the width is smaller than 800 pixels, we apply the styles here. So let me copy this. We reduce the font-size to say 3rem. And now for devices smaller than 800 pixels, you will see that the font size is smaller. Similarly, for even smaller devices, let me…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.