Styling based on parent state (group-{modifier}) is not working

[nikitimi]

Tailwindcss version: 3.4.3

Build Tools:
Next.js version: 14.2.4
Postcss version: 8.4.39

---

Node version: 20.15.0

Browser: Firefox v.130
OS: Windows

Reproduction URL

---

Issue:

This is a T3 stack.
I was trying to create a dynamic component with group-modifier, in my reproduction URL,
the <p> element has a group-{modifier} class, I know that the dynamic construction of a string tailwind classes is not possible e.g. :

Dynamic string

group-{modifier}:text-white

so what I've done is to return the whole static string tailwind class e.g. :

Static string

group-hover:text-white

However the result I'm getting is exactly like in the root / wherein the tailwind classes are included in the element's class attribute, but the class names are not included in .css generated by Tailwind.

Seems like the Static string example, in the context of being dynamic depends on properties passed behaves like the Dynamic string example.

What I was hoping for is like the button in route /manualParagraph.

[wongjn]

You'd want to cover the src/styles/colors.ts file with the content file globs, for example:

 export default {
-  content: ["./src/**/*.tsx"],
+  content: ["./src/**/*.{ts,tsx}"],
   theme: {

Or

 export default {
-  content: ["./src/**/*.tsx"],
+  content: [
+   "./src/**/*.tsx",
+   "./src/styles/colors.ts",
+  ],
   theme: {

Etc.

[nikitimi]

I completely overlooked the tailwindcss config file, thank you!