[v3.2] Document supports-foo configuration (tailwindlabs#1400)

* document `supports-foo` configuration

* Tweak supports docs

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>

Author: RobinMalfait

src/pages/docs/hover-focus-and-other-states.mdx

@@ -1077,6 +1077,26 @@ For terseness, if you only need to check if a property is supported (and not a s
 </div>
 ```
 
+You can configure shortcuts for common `@supports` rules you're using in your project in the `theme.supports` section of your `tailwind.config.js` file:
+
+```js tailwind.config.js
+module.exports = {
+  theme: {
+    supports: {
+      grid: 'display: grid',
+    },
+  },
+}
+```
+
+You can then use these custom `supports-*` modifiers in your project:
+
+```html
+<div class="**supports-grid:grid**">
+  <!-- ... -->
+</div>
+```
+
 ---
 
 ## Attribute selectors