Bundle includes unused component styles.

[johnny-mh]

Hi,

Thank you for creating such a great library!

I have a question regarding the class scanning feature.

I created a reusable component style using a plugin:

import plugin from "tailwindcss/plugin";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(({ addComponents }) => {
      addComponents({
        ".why": {
          ".so": {
            "&.serious": {
              backgroundColor: "red",
            },
          },
        },
      });
    }),
  ],
};

However, I noticed an unexpected behavior when using this style.

In my app, I am only applying the serious class to a root element:

import "./main.css";

const App = () => {
  return (
    <div className="serious"></div>; {/* This causes the bundle to include `.why .so.serious` styles. */}
  );
};

export default App;

Even though I'm not explicitly using .why, the bundled CSS still contains this style.

Is this the expected behavior, or could this be an edge case in the class scanning mechanism?

Thank you!

https://github.com/johnny-mh/tailwindcss-treeshaking-issue.git

[johnny-mh]

One of parent component has has .why class. there is no way to determine using this component. close.