diff --git a/src/index.js b/src/index.js
index a4f79b4..a021223 100644
--- a/src/index.js
+++ b/src/index.js
@@ -117,7 +117,7 @@ module.exports = plugin.withOptions(
         ['video'],
         ['hr'],
       ]) {
-        addVariant(`${className}-${name}`, `& :is(${inWhere(selector, options)})`)
+        addVariant(`${className}-${name}`, target === 'legacy' ? `& ${selector}` : `& :is(${inWhere(selector, options)})`)
       }
 
       addComponents(
diff --git a/src/index.test.js b/src/index.test.js
index 7f624f1..0d72fe1 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -335,7 +335,7 @@ test('modifiers', async () => {
 test('legacy target', async () => {
   let config = {
     plugins: [typographyPlugin({ target: 'legacy' })],
-    content: [{ raw: html`<div class="prose"></div>` }],
+    content: [{ raw: html`<div class="prose prose-h1:text-center"></div>` }],
     theme: {
       typography: {
         DEFAULT: {
@@ -423,6 +423,9 @@ test('legacy target', async () => {
         .prose code::after {
           content: '&#96;';
         }
+        .prose-h1\:text-center h1 {
+          text-align: center;
+        }
       `
     )
   })