From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,400 courses taught by industry experts.

Using responsive modifiers

Using responsive modifiers - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Using responsive modifiers

“

- [Instructor] Here's a short info section about our avocado that's perfectly styled for a mobile device. You can see the basic styles applied here, some padding for the body, a section with Flexbox in the column direction with some gap, an image, and a div with a heading and a paragraph. The heading has a font size of 2xl, and the paragraph has a default font size and images in Tailwind are by default restricted to a hundred percent max width. So you see it occupying the full width right now. These are the styles we start with for the smallest devices, this is how you need to start. Now let me resize the browser a little. Somewhere around this size, it would be good to increase the font size of this heading. So in Tailwind you can do that using breakpoints like sm, or md, lg, or xl and so on. So for the smallest of the breakpoint, which is slightly larger than a mobile, we use sm: and apply any of the utility classes that you need. So here I want to increase the font size to let's…

Contents