We configured our Next.js project
to use Tailwind CSS for styling.
But we still haven't seen much about Tailwind,
so let me give you a quick introduction.
Tailwind is a "utility-first" CSS framework.
What this means is that it provides
many small CSS classes,
that we can apply to our HTML elements,
and combine these classes together
to create the full style for a component.
So in this sense they are called
"utility classes".
Let's see an example,
that's always clearer than just words.
This is how we could style
a chat notification component
using a traditional approach.
We would assign a different class
to each element that forms the component,
for example, the title element
here is a "h4" heading
and has been assigned a class named
"chat-notification-title".
Then separately we can define
the rules for each CSS class,
so configure that "chat-notification-title"
to have a certain text "color",
"font-size", and so on.
That's the traditional approach,
and you've probably heard before that
it's a good practice to define CSS classes
that represent reusable styles,
and are separate from the HTML elements
that represent the semantic structure of the content.
But, when using a component framework like React,
reusability can already be achieved
by writing React components.
Each React component already is
a reusable piece of user interface.
Having to write many CSS classes
like in this example seems a bit unnecessary.
Now, let's see how we can do things
using Tailwind CSS.
This is the same chat notification component,
but styled using Tailwind.
The first thing you can immediately notice
is how much shorter this code is
compared to the first approach.
The way this works is that
we can style each element directly,
by setting some Tailwind utility classes
on this element.
In this case, this "div" that represents the title
has "text-xl",
which means an extra-large font size,
then "font-medium" that specifies the font weight,
and "text-black" that sets the text colour.
We can combine multiple utility classes
to achieve the full style for the title element.
Now, this approach can seem pretty weird
the first time you see it.
But in practice it actually works very well,
at least in my experience.
As we use Tailwind to style our components
in our Shop application
hopefully you'll get a feel for it.
Let's start with some simple examples.
We probably want to add some space
around the "main" element,
so let's add a "className" property.
Now, utility classes in Tailwind
tend to have very short names,
like, to add some "padding"
we can simply write "p",
and then specify an amount as a number,
like "p-1".
If we save, we can see in the page that
there's a little bit of padding
around the "Next Shop" text.
If we change this to "p-2",
there's now a little more padding.
Now, 1 and 2 here doesn't mean pixels,
or any other standard unit.
They're just some predefined choices
offered by Tailwind.
If you installed the Tailwind
Visual Studio Code extension
you can get suggestions showing all the options,
but also the rules corresponding to each class.
So in this case "p-2" results in a "padding"
of "0.5 rem" units,
which by default means "8px".
But there's no need to remember those values,
we can just try different numbers,
like "p-4"
and see how they look.
A bigger value means more padding of course.
We can also specify different padding values
in different directions.
If we write "px" this means
"padding" on the X axis,
so we get some horizontal padding.
While if we write "py"
that means on the Y axis, or vertically.
This allows us to specify different values
in different directions,
so we can put a bit more padding horizontally.
All these short class names
may seem a bit cryptic at first,
but as you get used to Tailwind
they'll start to feel quite intuitive.
And of course, all of these utility classes
are documented on the Tailwind website.
Now, let's add some styles to our heading as well,
so set a "className",
and we could increase the text size
by setting "text-lg", that's short for "large".
You can see that the Next Shop text is a bit bigger.
We could make it even bigger
by setting "text-xl", for "extra-large".
And in fact there are
a number of other options for the text size.
There's also "2xl", "3xl", and so on.
Let's try "2xl" for example.
I think that's big enough for our heading.
Let's check what happens
if we have some other elements in this page.
At some point we'll want to display
some products here.
Right now the heading is too close
to the following text,
so let's add some padding here as well.
But in this case we can use "pb",
that means "padding-bottom",
and let's try "2" as the value.
That's better, but maybe we could
increase it a bit more.
Let's try "pb-4".
Ok, I think that's enough.
So this was just a very quick example
of how to use Tailwind utility classes.
As I mentioned we'll see more examples
as we continue developing our shop website.
But let's talk about reusability now.
What if we have other pages in our website
and want a similar heading with the same styles?
Of course we could simply copy and paste this code,
but that's not ideal.
How can we make these styles reusable
so we can apply them in other pages as well?
The simplest option is to
put this code in its own React component.
We've seen in our Blog website
that we typically want a "components' folder
at the top of our project,
where we keep reusable components.
So we could create a "Title" module,
that's just a normal React function component.
And here we can paste the code for the heading,
including the CSS classes.
Let's export this function as the default.
But, to make it actually reusable,
we can take the "children" prop
and display "children" as the content
inside the "h1" element.
This way we can pass anything we want
as the Title content.
At this point in our HomePage
we can replace the existing code
with our new "Title" component,
and pass "Next Shop" as the content.
So if we save,
the page still looks the same,
but it is using the new Title component.
This means that, if we add another page,
we can simply reuse this Title component there
and it will display a heading
that uses the same Tailwind utility classes.
So by using Tailwind CSS
we can add the styles directly to the elements
where we want them,
but we still have the ability
to make the styles reusable,
simply by creating small React components,
like this Title component.