CSS classes referenced by composes: ... from global missing due to tree-shaking?

[kpvhn]

Summary

I have a next.js project with tailwindcss & SCSS modules.

When I reference a Tailwind CSS class using composes: ... from global;, the CSS class is missing from the resulting CSS, unless it is referenced somewhere else which is recognized, e.g. using className="...".

Example:

.container {
    composes: flex justify-end from global;
}

Used like this:

<div className={styles.container}>...</div>

In this example, flex was used somewhere else which was recognized, causing the CSS class to be present in the CSS and thus applied. justify-end hasn't been used anywhere other than in composes and is missing in the produced CSS.

However, if I write <div className={styles.container + " justify-end"}>, the definition is present in the output CSS.

Is this a bug, or how am I supposed to use composes such that the referenced CSS classes are included in the output CSS?

Additional information

`next info`:

    Operating System:
      Platform: linux
      Arch: arm64
      Version: #1 SMP PREEMPT Tue Sep 13 07:51:32 UTC 2022
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.8
      eslint-config-next: 13.4.6
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

### Example

_No response_

[icyJoseph]

I think the CSS pruning is the issue here, but I am a not as versed as I'd like to, in this process.

It is not tree-shaking, but rather, that Tailwind relies on a pruning to drop unused class names from the final CSS.

Maybe try:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.module.css", // <-- here
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};

[kpvhn]

Ah, that's it. Thank you 🙏