In this video we'll see how to do Responsive
Design with Tailwind CSS.
Something that conceptually belongs
more in the section about Styling,
but in the previous section
we didn't have any images,
so I couldn't really show you a good example.
Now, "Responsive Design" means styling our pages
so that they will look good
both on a small screen,
like on a mobile phone,
and on large screens, such as on desktop.
To achieve this, sometimes we want
to lay out our content differently
depending on the screen size.
To help with this, Tailwind predefines
five breakpoints,
where a "breakpoint" is a fixed screen width
that we can use to tailor our content.
The breakpoints are "sm", short for "small",
that corresponds to a minimum width of "640px",
"md", for "medium",
that's at least 768 pixels,
and so on, up to "2xl" that's "1536px".
We can use these breakpoints to apply different
styles based on the screen size.
There's a simple example here.
This will set the image width
to "w-16" by default,
but use "w-32" instead on a medium screen,
and "w-48" on a large screen.
So, it will automatically make the
image wider on a larger screen.
Now, it's important to note that
we should target smaller screens by default,
and then override the styles for larger screens.
This is a good approach,
because it encourages us to design our pages so that
they look good on small screens by default.
Once you do that it's usually easier to
adapt the styles for larger screens.
While if you take the opposite approach,
and start designing for a large screen,
it can be thenÂ difficult to make everything
fit on a smaller screen afterwards.
So, let's see how this works in practice.
At the moment, we're listing all
the reviews on this page,
but, our Home page is still mostly empty.
What we could do is show a featured review here,
that could be the latest review we published,
for example.
So people can come back and visit our home page
to see what's the latest review available.
We can start by copying the card
code from the Reviews page,
since the featured review will be fairly similar.
Let's put it after the tagline.
But here we don't have a list;
we can use a "div" rather than a list item.
And we'll also need to import the Link component.
I like to keep third party imports first,
before local modules.
Anyway, you can see the review
card in the browser.
Let's add some space below the paragraph,
with the "pb-3" class.
That's better.
Now, let's think about responsive design.
How does this page look on a larger screen?
There's a bit too much blank space.
What we could do is show the game
title next to the image,
rather than below it.
If we set the parent element to use flexbox,
this will display all the child elements in a row.
But in this case we shouldn't limit the width,
so let me remove "w-80" for now.
Ok, the review title is on the right,
and the card will stretch to fill all
the available horizontal space.
You can imagine that we could also display
some other text below the title,
like a summary of the review.
But we won't actually do that right now.
What we're more interested in at the moment
is that this layout won't work
well on a small screen,
because you cannot see the full text any more.
So, let's keep the title below
the image on smaller screens,
and to its right only on larger screens.
Translated into CSS classes,
this means that by default we want
to arrange the items in a column,
and the default applies to smaller screens.
But then we can use the "sm" modifier
to switch to "flex-row"
if the screen is larger than
the "small" breakpoint.
Let's see how this works now.
If we enlarge the browser window,
you can see that at some point the "Stardew
Valley" text moves to the right.
And if we shrink the window,
the text will move back below the image.
The Chrome DevTools show the viewport size
in the top-right corner of the page.
If you notice, the switch happens
as soon as we pass 640 pixels,
that is in fact the predefined width
for the "small" breakpoint.
So this is how we can apply different
styles depending on the screen size.
We could add more rules for other breakpoints,
like "medium", "large", and so on.
But we'll only use the "small"
breakpoint for this example.
Now, to make this look better we
should re-add "w-80" by default.
This way the card will be as wide as the image.
But if the screen exceeds the "small" breakpoint,
we can set the width to full instead.
This way the card will expand
to fill the horizontal space.
Now, let's tweak the styles for this screen size.
We'll need some space before the "h2" text,
so, for "sm", let's add "px-2".
Ok, there's some horizontal padding.
But that's not required when
the screen is very small.
What else do we need to tweak?
The image is only rounded at the top.
It's barely noticeable, but there's no
rounding in the bottom-left corner.
When the image is displayed
to the left of the text,
we should change the rounding accordingly.
So for "sm" we want "rounded-l",
which means on the left.
The left side in fact looks good now.
But the top-right corner also has some rounding,
and it shouldn't.
That's because we set "rounded-t" by default,
so it always applies the rounding to the top.
We'll need to disable any rounding
on the right side,
by using "rounded-r-none".
This way it should finally be consistent
with the card border.
You can see how some times you have
to fiddle with the styles,
to make sure they look good on all screen sizes.
This can be quite time consuming,
which is why I won't make all
our pages fully responsive,
nor cover all possible screen sizes.
But this example should give you the
basic idea of how to do that.
The key is to choose a style that works
well on smaller screens by default,
like in this case displaying
all the items in a column.
And then override that style for larger screens,
for example to display the items in a row instead.