visibility

Author: MichaelDeBoey

docs/source/docs/visibility.blade.md

@@ -42,7 +42,7 @@ Use `.invisible` to hide an element, but still maintain its space.
 
 ## Responsive
 
-To apply an overflow utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:overflow-scroll` to an element would apply the `overflow-scroll` utility at medium screen sizes and above.
+To apply a visibility utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:invisible` to an element would apply the `invisible` utility at medium screen sizes and above.
 
 For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
 
@@ -76,3 +76,37 @@ For more information about Tailwind's responsive design features, check out the
 <div class="none:visible sm:invisible md:visible lg:invisible xl:visible ..."></div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, no hover, focus, or group-hover variants are generated for visibility utilities.
+
+You can control which variants are generated for the visibility utilities by modifying the `visibility` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        visibility: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+### Disabling
+
+If you aren't using the visibility utilities in your project, you can disable them entirely by setting the `visibility` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        visibility: false,
+    }
+}
+```