diff --git a/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap b/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap
new file mode 100644
index 0000000..a818da2
--- /dev/null
+++ b/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Custom - Parent Variant Snapshots parent:text-white 1`] = `
+
+
+ A
+
+
+ B
+
+
+`;
diff --git a/__tests__/custom-tailwindcss/parent-variant.tsx b/__tests__/custom-tailwindcss/parent-variant.tsx
new file mode 100644
index 0000000..9da51e6
--- /dev/null
+++ b/__tests__/custom-tailwindcss/parent-variant.tsx
@@ -0,0 +1,34 @@
+import { Text, View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { TestProvider } from "../tailwindcss/runner";
+import { StyledComponent } from "../../src";
+import { tailwindRunner } from "../tailwindcss/runner";
+
+tailwindRunner("Custom - Parent Variant", [
+ [
+ "parent:text-white",
+ {
+ "parent_text-white": [
+ {
+ atRules: [["selector", "(> *)"]],
+ color: "#fff",
+ },
+ ],
+ },
+ ],
+]);
+
+describe("Custom - Parent Variant Snapshots", () => {
+ test("parent:text-white", () => {
+ const tree = render(
+
+
+ A
+ B
+
+
+ ).toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts
index 97663e6..96659c8 100644
--- a/src/tailwind/index.ts
+++ b/src/tailwind/index.ts
@@ -10,4 +10,6 @@ export default plugin(function ({ addVariant }) {
"native",
nativePlatforms.map((platform) => `@media ${platform}`)
);
+
+ addVariant("parent", "& > *");
});
diff --git a/src/tailwind/native/index.ts b/src/tailwind/native/index.ts
index d6f9888..28e1766 100644
--- a/src/tailwind/native/index.ts
+++ b/src/tailwind/native/index.ts
@@ -17,6 +17,7 @@ import { scale } from "./scale";
import { skew } from "./skew";
import { space } from "./space";
import { translate } from "./translate";
+import { parent } from "./parent";
export interface NativePluginOptions {
rem?: number;
@@ -50,6 +51,7 @@ export const nativePlugin = plugin.withOptions(
boxShadow(helpers, notSupported);
pseudoClasses(helpers, notSupported);
component(helpers, notSupported);
+ parent(helpers, notSupported);
};
},
function ({ rem = 16 } = {}) {
diff --git a/src/tailwind/native/parent.ts b/src/tailwind/native/parent.ts
new file mode 100644
index 0000000..07f33dc
--- /dev/null
+++ b/src/tailwind/native/parent.ts
@@ -0,0 +1,5 @@
+import { CustomPluginFunction } from "./types";
+
+export const parent: CustomPluginFunction = ({ addVariant }) => {
+ addVariant("parent", "@selector (> *)");
+};