diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less index 8de9f296b..63b46dad4 100644 --- a/docs/source/_assets/less/main.less +++ b/docs/source/_assets/less/main.less @@ -24,6 +24,18 @@ ul { @tailwind utilities; +.active\:bg-blue:active { + @apply .bg-blue; +} + +.active\:text-white:active { + @apply .text-white; +} + +.active\:border-transparent:active { + @apply .border-transparent; +} + .focus\:bg-grey-dark:focus { @apply .bg-grey-dark; } diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php index 3e16ab376..77e7b9bcd 100644 --- a/docs/source/_partials/feature-badges.blade.php +++ b/docs/source/_partials/feature-badges.blade.php @@ -48,6 +48,22 @@ @endif + @if ($active) + + + + + Active + + @else + + + + + Active + + @endif + @if ($focus) diff --git a/docs/source/_partials/variants-and-disabling.blade.php b/docs/source/_partials/variants-and-disabling.blade.php index daaa785b0..1ca6ff3e5 100644 --- a/docs/source/_partials/variants-and-disabling.blade.php +++ b/docs/source/_partials/variants-and-disabling.blade.php @@ -9,6 +9,7 @@ $extraVariants = collect([ 'responsive', 'hover', + 'active', 'focus', 'group-hover', ])->diff($variants) @@ -16,7 +17,7 @@ ->implode(' and '); @endphp -

Responsive, Hover, and Focus Variants

+

Responsive, Hover, Active and Focus Variants

By default, {{ $whichVariants }} variants are generated for {{ $utility['name'] }} utilities.

@@ -27,7 +28,7 @@ @component('_partials.customized-config', ['key' => 'modules']) // ... - {{ $utility['property'] }}: [{{$currentVariants}}], -+ {{ $utility['property'] }}: ['responsive', 'hover', 'focus'], ++ {{ $utility['property'] }}: ['responsive', 'hover', 'active', 'focus'], @endcomponent @isset($extraMessage) diff --git a/docs/source/docs/background-attachment.blade.md b/docs/source/docs/background-attachment.blade.md index 60708655f..192ce64a6 100644 --- a/docs/source/docs/background-attachment.blade.md +++ b/docs/source/docs/background-attachment.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md index 2ea73bdce..5a302d889 100644 --- a/docs/source/docs/background-color.blade.md +++ b/docs/source/docs/background-color.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md index 5b171bc6d..6fa7c5e58 100644 --- a/docs/source/docs/background-position.blade.md +++ b/docs/source/docs/background-position.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/background-repeat.blade.md b/docs/source/docs/background-repeat.blade.md index ac7994e2a..a7a7bc055 100644 --- a/docs/source/docs/background-repeat.blade.md +++ b/docs/source/docs/background-repeat.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index 3f81cf40a..a6402fc09 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md index 8bc4f16e1..c239cc2ef 100644 --- a/docs/source/docs/border-color.blade.md +++ b/docs/source/docs/border-color.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md index 4cd4fc28e..4420809a9 100644 --- a/docs/source/docs/border-radius.blade.md +++ b/docs/source/docs/border-radius.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md index a37b2c5ef..edabf0de6 100644 --- a/docs/source/docs/border-style.blade.md +++ b/docs/source/docs/border-style.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md index d80d257fc..898820d34 100644 --- a/docs/source/docs/border-width.blade.md +++ b/docs/source/docs/border-width.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/configuration.blade.md b/docs/source/docs/configuration.blade.md index 9e92a8522..4f24db3d8 100644 --- a/docs/source/docs/configuration.blade.md +++ b/docs/source/docs/configuration.blade.md @@ -162,6 +162,7 @@ The available state variants are: - `responsive`, for generating breakpoint-specific versions of those utilities - `hover`, for generating versions of those utilities that only take effect on hover +- `active`, for generating versions of those utilities that only take effect on active - `focus`, for generating versions of those utilities that only take effect on focus - `group-hover`, for generating versions of those utilities that only take effect when a marked parent element is hovered diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md index 44c0b9a58..07338f296 100644 --- a/docs/source/docs/cursor.blade.md +++ b/docs/source/docs/cursor.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/display.blade.md b/docs/source/docs/display.blade.md index 9364e9358..5b2d6cd15 100644 --- a/docs/source/docs/display.blade.md +++ b/docs/source/docs/display.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md index 911c9a342..875b94161 100644 --- a/docs/source/docs/flexbox-align-content.blade.md +++ b/docs/source/docs/flexbox-align-content.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md index bbe7c1098..c638d8216 100644 --- a/docs/source/docs/flexbox-align-items.blade.md +++ b/docs/source/docs/flexbox-align-items.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md index 6d62577a6..817c76e12 100644 --- a/docs/source/docs/flexbox-align-self.blade.md +++ b/docs/source/docs/flexbox-align-self.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md index 0388046e1..51d099622 100644 --- a/docs/source/docs/flexbox-direction.blade.md +++ b/docs/source/docs/flexbox-direction.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md index 7d008ffc3..5f917975c 100644 --- a/docs/source/docs/flexbox-display.blade.md +++ b/docs/source/docs/flexbox-display.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md index 3b1118c84..4724ad6ae 100644 --- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md +++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md index c8c5cec15..db6c59f1f 100644 --- a/docs/source/docs/flexbox-justify-content.blade.md +++ b/docs/source/docs/flexbox-justify-content.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md index 596e66b7a..5526d730a 100644 --- a/docs/source/docs/flexbox-wrapping.blade.md +++ b/docs/source/docs/flexbox-wrapping.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md index 6ca9a94bb..faa545bce 100644 --- a/docs/source/docs/floats.blade.md +++ b/docs/source/docs/floats.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md index ed821deba..7264e7428 100644 --- a/docs/source/docs/font-weight.blade.md +++ b/docs/source/docs/font-weight.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index 5964aa51a..c2c0c6136 100644 --- a/docs/source/docs/fonts.blade.md +++ b/docs/source/docs/fonts.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md index 3aa0b4d15..4bd6a051d 100644 --- a/docs/source/docs/forms.blade.md +++ b/docs/source/docs/forms.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md index 87534acfb..1bb6060f8 100644 --- a/docs/source/docs/height.blade.md +++ b/docs/source/docs/height.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md index 218b6a097..2efb3064a 100644 --- a/docs/source/docs/letter-spacing.blade.md +++ b/docs/source/docs/letter-spacing.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md index fd2fc8d37..369900db2 100644 --- a/docs/source/docs/line-height.blade.md +++ b/docs/source/docs/line-height.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md index a79b17e91..b04da7031 100644 --- a/docs/source/docs/lists.blade.md +++ b/docs/source/docs/lists.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md index 6d1325dd2..1819b7123 100644 --- a/docs/source/docs/max-height.blade.md +++ b/docs/source/docs/max-height.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md index dc1903486..bca2f8c58 100644 --- a/docs/source/docs/max-width.blade.md +++ b/docs/source/docs/max-width.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md index 6cfbbc4cf..54cbb182c 100644 --- a/docs/source/docs/min-height.blade.md +++ b/docs/source/docs/min-height.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md index 3eb1562e7..5ef2f7592 100644 --- a/docs/source/docs/min-width.blade.md +++ b/docs/source/docs/min-width.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md index fdfe1a94b..00ec0a6e0 100644 --- a/docs/source/docs/opacity.blade.md +++ b/docs/source/docs/opacity.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md index 7487e721c..32e7faf64 100644 --- a/docs/source/docs/overflow.blade.md +++ b/docs/source/docs/overflow.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md index a8ae844ff..fdc2e51b8 100644 --- a/docs/source/docs/pointer-events.blade.md +++ b/docs/source/docs/pointer-events.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md index b18a3fac7..484825cf3 100644 --- a/docs/source/docs/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md index a4c1f89ae..581dfc7c5 100644 --- a/docs/source/docs/resize.blade.md +++ b/docs/source/docs/resize.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index 5dc2a2ad4..cee2e3ecd 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md index ebc99e9bc..3aac00a26 100644 --- a/docs/source/docs/spacing.blade.md +++ b/docs/source/docs/spacing.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/state-variants.blade.md b/docs/source/docs/state-variants.blade.md index 582b354fe..ee568d81c 100644 --- a/docs/source/docs/state-variants.blade.md +++ b/docs/source/docs/state-variants.blade.md @@ -1,10 +1,10 @@ --- extends: _layouts.documentation title: "State Variants" -description: "Using utilities to style elements on hover, focus, and more." +description: "Using utilities to style elements on hover, active, focus, and more." --- -Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, focus, and more using *state* prefixes. +Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, active, focus, and more using *state* prefixes. ## Hover @@ -35,6 +35,35 @@ Add the `hover:` prefix to only apply a utility on hover. +## Active + +Add the `active:` prefix to only apply a utility on active. + +@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) + + + +@slot('code') + +@endslot +@endcomponent + +
+
+
+ +
+
+

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

+

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

+
+
+
+ ## Focus diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md index afd8ec3e1..932a3b634 100644 --- a/docs/source/docs/text-alignment.blade.md +++ b/docs/source/docs/text-alignment.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md index 0de8f055a..58d71f1ae 100644 --- a/docs/source/docs/text-color.blade.md +++ b/docs/source/docs/text-color.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md index 2ecc40e1f..ee752b6e0 100644 --- a/docs/source/docs/text-sizing.blade.md +++ b/docs/source/docs/text-sizing.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md index 48ee7d503..1655874d2 100644 --- a/docs/source/docs/text-style.blade.md +++ b/docs/source/docs/text-style.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md index ef76d83b9..cb242c89c 100644 --- a/docs/source/docs/user-select.blade.md +++ b/docs/source/docs/user-select.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md index be85ec7c7..70b16c6f2 100644 --- a/docs/source/docs/vertical-alignment.blade.md +++ b/docs/source/docs/vertical-alignment.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md index 940bbc54b..310a3fa6b 100644 --- a/docs/source/docs/visibility.blade.md +++ b/docs/source/docs/visibility.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md index 409d23ed0..3a9831e36 100644 --- a/docs/source/docs/whitespace-and-wrapping.blade.md +++ b/docs/source/docs/whitespace-and-wrapping.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md index d5f690976..52791c9db 100644 --- a/docs/source/docs/width.blade.md +++ b/docs/source/docs/width.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md index 3e4a7bee7..facb4845c 100644 --- a/docs/source/docs/z-index.blade.md +++ b/docs/source/docs/z-index.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false ---