Transcript

In the previous video, we skinned our application using Tailwind and completed that. Now, there is another flavor of Tailwind style usage in Next.js, and that's to use a combination of CSS modules and Tailwind using the at apply directive. Let's give that a try. So let's say we've got this container

here and I want to actually turn that into a CSS module class. I'm going to go and create a new file called product card.module.CSS, just like we did before. I'm going to create a new class, call it

card, and in there I'm going to apply that at container class. Then over my product card, I'm

going to import that. Then just like I did with any other modules, I'm just going to use styles.card. Hit save, take a look over in PolyPane, and now it

works just fine. Now, actually I'm going to go to do the entire thing so you can see what it looks like when you've completely done this. So now I've created classes for card, the card container, the image container, the inside image, the info container, and the title and the price. Hit save. Then go down to our code and it will make the

appropriate changes on this side. We'll just change the class names to reference those classes that I created in the product card module CSS. Hit save. And Now we can see that we have exactly the same look and feel that we had before. But I got to say from the reading standpoint, I think this

looks a lot better. Now, 1 thing you can do is because the values of card and card container and image container are really just strings. You can just use them as strings inside of your class name. For example, I can take the initial styles.card as a baseline, and then I can add, for example,

background red at some value and make it look really nasty. Let's hit save. There we go. Now, we basically put on top of the existing style that I've applied, the additional style of a

background red. There's no real magic of CSS modules when they're inside of an XJS application. The values themselves are just strings and you can use them as such. All right, I'll take that out of there so we have good-looking cards and I'll see you in the next video.

lesson

Combine CSS Modules with Tailwind CSS

Jack Herrington

There is another approach to using Tailwind in Next.js, which involves combining CSS modules with Tailwind using the @apply directive.

Converting to CSS Modules

Recall that the ProductCard component has a container class for the wrapping div:

export const ProductCard = ({ product }: Props) => {
  return (
    <div className="@container">
      <div className="flex flex-col @md:flex-row">
    ...

Let's convert it to use CSS modules instead.

To do this, we'll create a new file called ProductCard.module.css. Inside this file, we'll define a new class called card and apply the @container class to it with @apply:

/* inside ProductCard.module.css */

.card {
  @apply container;
}

Back in the ProductCard component, we'll import the CSS module:

import styles from './ProductCard.module.css';

Then, we'll replace the @container class with styles.card:

// inside the ProductCard component
<div className={styles.card}>
  {/* ... */}
</div>

After saving the changes, we can check the result in PolyPane, and it should look just fine:

Applying CSS Modules to the Entire Component

Let's take it a step further and apply CSS modules to the entire component. We'll create classes for each section of the card in the ProductCard.module.css file, using the @apply directive to apply Tailwind classes:

.card {
  @apply @container;
}

.cardContainer {
  @apply flex flex-col @md:flex-row;
}

.imageContainer {
  @apply w-full @md:w-1/4;
}

.image {
  @apply w-full h-auto rounded-tl-2xl rounded-tr-2xl @md:rounded-tr-none rounded-bl-none @md:rounded-bl-2xl;
}

.infoContainer {
  @apply w-full @md:w-3/4 pl-4 border-b-2 border-gray-400 rounded-br-2xl rounded-bl-2xl @md:rounded-bl-none border-l-2 @md:border-t-2 rounded-tr-none @md:rounded-tr-2xl border-r-2 @md:border-l-transparent;
}

.title {
  @apply text-2xl mt-4;
}

.price {
  @apply text-lg mb-4 italic;
}

Next, we'll update the class names in our component to reference the classes we created in the CSS module:

export const ProductCard = ({ product }: Props) => {
  return (
    <div className={styles.card}>
      <div className={styles.cardContainer}>
        <div className={styles.imageContainer}>
          <Image
            src={product.image}
            alt={product.title}
            width={300}
            height={300}
            className={styles.image}
          />
        </div>
        <div className={styles.infoContainer}>
          <h1 className={styles.title}>{product.title}</h1>
          <p className={styles.price}>{product.price}</p>
        </div>
      </div>
    </div>
  );
};

After saving the changes, we should see the same look and feel as before. However, from a readability standpoint, using CSS modules can make the code more readable and maintainable.

Combining CSS Module Classes with Inline Styles

It's important to note that the values of card, cardContainer, imageContainer, etc., are simply strings. Therefore, you can use them as strings within your className attribute.

For example, you can take the initial styles.card as a baseline and add additional inline styles:

<div className={`${styles.card} bg-red-500`}>
  {/* ... */}
</div>

In this case, we're applying a red background color on top of the existing styles defined in the CSS module:

Combining Tailwind classes with CSS modules

The Big Takeaway

There's no real magic to CSS modules when used inside a Next.js application. The values themselves are just strings, and you can use them as such.

With that, we've explored how to use CSS modules in combination with Tailwind in Next.js. This approach provides a clean and maintainable way to style your components while still leveraging the power of Tailwind.