Utilizing multiple className is possible by combining them like this

<li className={`${styles.projects-pd-text} ${styles.projects-pd-subdetail}`}>
   {sub}
</li>

However, a potential issue may arise. It could result in an error (though not confirmed). To avoid this, consider using camelCase for your CSS class names.

<li className={`${styles.projectsPdText} ${styles.projectsPdSubdetail}`}>
   {sub}
</li>

Alternatively, if you prefer not to use camelCase

<li className={`${styles["projects-pd-text"]} ${styles["projects-pd-subdetail"]}`}>
       {sub}
</li>

Feel free to inform me of the outcome.

Another convenient method of managing multiple classes is through the clsx library. The advantage of clsx is the ability to handle conditional class names as well.

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

To easily combine elements in an array, a simple array join method can be used.

["apple", "banana", "orange"].join(" and ")

This will give us:

"apple and banana and orange"

<div className={[styles.fruit1, styles.fruit2, styles.fruit3].join(" ")}>
   Fruit Salad
</div>

Alternatively, the classes can be stored in a variable for future use:

const fruitClasses = [styles.fruit1, styles.fruit2]

// somewhere in the code
<div className={[...fruitClasses, styles.fruit3].join(" ")}>
   Another Fruit Salad
</div>

clsx is a popular utility for conditionally adding classes to an element.

Check out clsx on npm

The most efficient way to handle this is by utilizing the join() method, as previously pointed out by @rain in a discussion.

An alternative approach would be to implement universal css class names.

<span className={[styles.grid, "disabled"].join(" ")}>content</span>

With the release of Nextjs version 13.4+, you now have the option to utilize the default supported cn function, which leverages the power of clsx.

layout.tsx

import { cn } from "@/lib/utils";
export default function Component(){
   return <div className={cn("flex font-sans","inter.className","h-full")}/>
}

The lib/utils.ts file contains the following by default:

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

If you're tired of constantly typing out styles.className for every class you want to add to an element, consider creating a utility function to streamline the process.

For instance, I crafted this function:

export const classes = (styles: any, classes: string) => {
    const list = classes.split(' ');

    classes = '';
    for (const className of list) {
        classes += `${styles[className] }`
    }
    return classes;
} 

and saved it in a util file.

Now, when working on elements, I can simply do this:

<div className={classes( styles, 'hero-container text-success text-bold italicize another-class yet-another-class ')}>
     Lorem ipsum dolor
</div>

A BONUS:

When starting with NextJS on VSCode, I struggled with emmet tag generation not displaying the classnames the way NextJS does when typing a css class selector.

    "Complete NextJS Classname Emmet": {
        "scope": "javascript,typescript,typescriptreact,javascriptreact",
        "prefix": ["."],
        "body": [
            "<div className={classes( styles, '$1')}>",
            "\t$2",
            "</div>"
        ],
        "description": "Lean autocomplete emmet in nextjs css modules classname"
    }

I added this snippet to my User Snippets in VSCode preferences for typescriptreact.json. These adjustments have certainly improved my experience working with classnames in NextJS, particularly on VSCode.

Success was achieved in my case.

<div className={styles.side +" "+ styles.side2}>side2</div>

Credit goes to CodeMaster

If you utilize console log for your css or scss module class (i.e., ImportedStyleModule.someClassName), you will notice that it is simply a string with an auto-generated UID added.

Therefore, since it is just a string, there are multiple ways to concatenate them together:

//ts         
const mergeStyles = (styleArray: string[]) => (styleArray.map((style: string) => `${style}`).join(" "));        
                        
//js
const mergeStyles = (styleArray) => (styleArray.map((style) => `${style}`).join(" "));
                        
//example
return (
    <span
        onClick={() => setIsClicked(!isClicked)}
        className={`${!!isClicked 
            ? mergeStyles([NavbarStyle.navButton, NavbarStyle.navButtonOpen])
            : NavbarStyle.navButton}`}
    >
        <Image src='/image-logo.svg' alt='logo' width='80px' height='40px' />
    </span>
);

 <div className={`${GloStyles.flexRow} ${MyStyles.gap_10rem}`}> Hello </div>

Here's the breakdown:

• The className attribute only accepts a string.
• By using String templates, we can easily combine multiple classes just like in a regular React app.

View image description here View image description here

Using a function would definitely make the code more organized and readable.

const updateClassName = (className) =>  className.split(' ').map(c => styles[c]).join(' ')

You can easily utilize this function in your JSX like this:

<div className={updateClassName("firstClass secondClass")}></div>

If you need to handle conditional class names, I recommend checking out classnames package on npm.