Update

src/__tests__/styleObject.test.ts

@@ -42,4 +42,51 @@ describe("babel-tailwind", () => {
     );
     expect(files.js.text).toContain(`style: ${clsName}`);
   });
+
+  it("supports .hover, .focus, .active, .group-hover, .group-focus, .group-active", async () => {
+    const { files } = await compileESBuild({
+      clsx: "emotion",
+      expectFiles: 1,
+      javascript: `
+        import { tws } from "@aet/tailwind/macro";
+
+        export const style = [
+          tws.hover\`font-semibold\`,
+          tws.focus\`font-bold\`,
+          tws.active\`font-light\`,
+          tws.hover.active\`p-2\`,
+        ];
+    `,
+    });
+
+    const semibold = getClassName("hover:font-semibold").replace(/^tw-/, "tw_");
+    const bold = getClassName("focus:font-bold").replace(/^tw-/, "tw_");
+    const light = getClassName("active:font-light").replace(/^tw-/, "tw_");
+    const p = getClassName("active:hover:p-2").replace(/^tw-/, "tw_");
+
+    expect(files.js.text).toContain(
+      [
+        `var ${bold} = {`,
+        '  "&:focus": {',
+        '    fontWeight: "700"',
+        "  }",
+        "};",
+        `var ${light} = {`,
+        '  "&:active": {',
+        '    fontWeight: "300"',
+        "  }",
+        "};",
+        `var ${p} = {`,
+        '  "&:hover:active": {',
+        '    padding: "0.5rem"',
+        "  }",
+        "};",
+        `var ${semibold} = {`,
+        '  "&:hover": {',
+        '    fontWeight: "600"',
+        "  }",
+        "};",
+      ].join("\n")
+    );
+  });
 });

src/__tests__/tw.test.ts

@@ -51,4 +51,22 @@ describe("babel-tailwind", () => {
       ].join("\n")
     );
   });
+
+  it("passes through `group` className", async () => {
+    const { files } = await compileESBuild({
+      clsx: "emotion",
+      expectFiles: 2,
+      javascript: `
+      import { tw } from "@aet/tailwind/macro";
+
+      export default tw\`group hover:text-center\`;
+    `,
+    });
+
+    const clsName = getClassName("group hover:text-center");
+    expect(files.js.text).toContain(`"${clsName} group"`);
+    expect(files.css.text).toMatch(
+      [`.${clsName}:hover {`, "  text-align: center;", "}"].join("\n")
+    );
+  });
 });

src/__tests__/utils.ts

@@ -42,8 +42,6 @@ export function getBuild(name: string) {
   }) {
     const tailwind = getTailwindPlugins({
       tailwindConfig: {},
-      macroFunction: "tw",
-      macroStyleFunction: "tws",
       ...options,
     });
     const result = await esbuild.build({