diff --git a/src/tailwind/native/component.ts b/src/tailwind/native/group-isolate.ts similarity index 77% rename from src/tailwind/native/component.ts rename to src/tailwind/native/group-isolate.ts index 49266f2..b56fd6e 100644 --- a/src/tailwind/native/component.ts +++ b/src/tailwind/native/group-isolate.ts @@ -1,6 +1,6 @@ import { CustomPluginFunction } from "./types"; -export const component: CustomPluginFunction = ({ addVariant }) => { +export const groupIsolate: CustomPluginFunction = ({ addVariant }) => { addVariant("group-isolate-hover", "&::group-isolate-hover"); addVariant("group-isolate-active", "&::group-isolate-active"); addVariant("group-isolate-focus", "&::group-isolate-focus"); diff --git a/src/tailwind/native/index.ts b/src/tailwind/native/index.ts index c3a5613..813548e 100644 --- a/src/tailwind/native/index.ts +++ b/src/tailwind/native/index.ts @@ -1,7 +1,7 @@ import plugin from "tailwindcss/plugin"; import { StyleError } from "../../types/common"; import { boxShadow } from "./box-shadow"; -import { component } from "./component"; +import { groupIsolate } from "./group-isolate"; import { divide } from "./divide"; import { elevation } from "./elevation"; import { fontSize } from "./font-size"; @@ -56,7 +56,7 @@ export const nativePlugin = plugin.withOptions( translate(helpers, notSupported); skew(helpers, notSupported); boxShadow(helpers, notSupported); - component(helpers, notSupported); + groupIsolate(helpers, notSupported); parent(helpers, notSupported); }; }, diff --git a/website/docs/core-concepts/states.md b/website/docs/core-concepts/states.md index a774ab0..d325d6b 100644 --- a/website/docs/core-concepts/states.md +++ b/website/docs/core-concepts/states.md @@ -87,7 +87,7 @@ const App = () => { group-isolate-hover:text-blue-500 group-isolate-active:text-red-500 `}> - Text in a child group - hover and click me! + Child group-isolate have their own state!