diff --git a/docs/source/docs/state-variants.blade.md b/docs/source/docs/state-variants.blade.md index f7327fb37..f44c43660 100644 --- a/docs/source/docs/state-variants.blade.md +++ b/docs/source/docs/state-variants.blade.md @@ -8,8 +8,6 @@ Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it ## Hover -*By default, **hover variants are only generated for background color, border color, and text color utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.* - Add the `hover:` prefix to only apply a utility on hover. @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @@ -25,9 +23,20 @@ Add the `hover:` prefix to only apply a utility on hover. @endslot @endcomponent -## Focus +
+
+
+ +
+
+

By default, hover variants are only generated for background color, border color, and text color utilities.

+

You can customize this in the modules section of your configuration file.

+
+
+
-*By default, **focus variants are not generated for any utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.* + +## Focus Add the `focus:` prefix to only apply a utility on focus. @@ -41,11 +50,21 @@ Add the `focus:` prefix to only apply a utility on focus. @endslot @endcomponent +
+
+
+ +
+
+

By default, focus variants are not generated for any utilities.

+

You can customize this in the modules section of your configuration file.

+
+
+
+ ## Group Hover -*By default, **group hover variants are not generated for any utilities.** You can customize this in the [modules section](/docs/configuration#modules) of your configuration file.* - If you need to style a child element when hovering over a specific parent element, add the `.group` class to the parent element and add the `group-hover:` prefix to the utility on the child element. @component('_partials.code-sample', ['lang' => 'html', 'class' => 'bg-grey-lighter p-8']) @@ -63,6 +82,18 @@ If you need to style a child element when hovering over a specific parent elemen @endslot @endcomponent +
+
+
+ +
+
+

By default, group hover variants are not generated for any utilities.

+

You can customize this in the modules section of your configuration file.

+
+
+
+ ## Combining with Responsive Prefixes State variants are also responsive, meaning you can change an element's hover style for example at different breakpoints.