Clarify usage of outline utilities in documentation (#2071)

This pull request includes a small change to the
`src/docs/outline-width.mdx` file. The change modifies the description
to clarify the usage of `outline` utilities.

*
[`src/docs/outline-width.mdx`](diffhunk://#diff-a7a0467902b75954570708cc09d471f346011c3bce60b92e96aaa0c8b21f56daL22-R22):
Changed "and" to "or" in the description to clarify that either
`outline` or `outline-<number>` utilities can be used to set the width
of an element's outline.

---------

Co-authored-by: Philipp Spiess <[email protected]>

Author: jaykumarcunomial

src/docs/background-size.mdx

@@ -93,7 +93,13 @@ Use the `bg-auto` utility to display the background image at its default size:
 
 ### Using a custom value
 
-<UsingACustomValue utility="bg" value="auto_100px" name="background image size" variable="image-size" dataType="length" />
+<UsingACustomValue
+  utility="bg"
+  value="auto_100px"
+  name="background image size"
+  variable="image-size"
+  dataType="length"
+/>
 
 ### Responsive design
 

src/docs/border-width.mdx

@@ -126,7 +126,7 @@ export const description = "Utilities for controlling the width of an element's
 
 ### Basic example
 
-Use `border` and `border-<number>` utilities like `border-2` and `border-4` to set the border width for all sides of an element:
+Use `border` or `border-<number>` utilities like `border-2` and `border-4` to set the border width for all sides of an element:
 
 <Figure>
 

src/docs/box-shadow.mdx

@@ -240,7 +240,7 @@ By default colored shadows have an opacity of 100% but you can adjust this using
 
 ### Adding a ring
 
-Use `ring` and `ring-<number>` utilities like `ring-2` and `ring-4` to apply a solid box-shadow to an element:
+Use `ring` or `ring-<number>` utilities like `ring-2` and `ring-4` to apply a solid box-shadow to an element:
 
 <Figure>
 
@@ -319,7 +319,7 @@ By default rings have an opacity of 100% but you can adjust this using the opaci
 
 ### Adding an inset ring
 
-Use `inset-ring` and `inset-ring-<number>` utilities like `inset-ring-2` and `inset-ring-4` to apply a solid inset box-shadow to an element:
+Use `inset-ring` or `inset-ring-<number>` utilities like `inset-ring-2` and `inset-ring-4` to apply a solid inset box-shadow to an element:
 
 <Figure>
 

src/docs/gap.mdx

@@ -57,7 +57,7 @@ Use `gap-<number>` utilities like `gap-2` and `gap-4` to change the gap between
 
 ### Changing row and column gaps independently
 
-Use `gap-x-<number>` and `gap-y-<number>` utilities like `gap-x-8` and `gap-y-4` to change the gap between columns and rows independently:
+Use `gap-x-<number>` or `gap-y-<number>` utilities like `gap-x-8` and `gap-y-4` to change the gap between columns and rows independently:
 
 <Figure>
 

src/docs/grid-column.mdx

@@ -71,7 +71,7 @@ Use `col-span-<number>` utilities like `col-span-2` and `col-span-4` to make an
 
 ### Starting and ending lines
 
-Use `col-start-<number>` and `col-end-<number>` utilities like `col-start-2` and `col-end-3` to make an element start or end at the _nth_ grid line:
+Use `col-start-<number>` or `col-end-<number>` utilities like `col-start-2` and `col-end-3` to make an element start or end at the _nth_ grid line:
 
 <Figure>
 

src/docs/grid-row.mdx

@@ -65,7 +65,7 @@ Use `row-span-<number>` utilities like `row-span-2` and `row-span-4` to make an
 
 ### Starting and ending lines
 
-Use `row-start-<number>` and `row-end-<number>` utilities like `row-start-2` and `row-end-3` to make an element start or end at the _nth_ grid line:
+Use `row-start-<number>` or `row-end-<number>` utilities like `row-start-2` and `row-end-3` to make an element start or end at the _nth_ grid line:
 
 <Figure>
 

src/docs/height.mdx

@@ -97,7 +97,7 @@ Use `h-<number>` utilities like `h-24` and `h-64` to set an element to a fixed h
 
 ### Using a percentage
 
-Use `h-full` and `h-<fraction>` utilities like `h-1/2` and `h-2/5` to give an element a percentage-based height:
+Use `h-full` or `h-<fraction>` utilities like `h-1/2` and `h-2/5` to give an element a percentage-based height:
 
 <Figure>
 

src/docs/margin.mdx

@@ -252,7 +252,7 @@ To use a negative margin value, prefix the class name with a dash to convert it
 
 ### Using logical properties
 
-Use `ms-<number>` and `me-<number>` utilities like `ms-4` and `me-8` to set the `margin-inline-start` and `margin-inline-end` logical properties:
+Use `ms-<number>` or `me-<number>` utilities like `ms-4` and `me-8` to set the `margin-inline-start` and `margin-inline-end` logical properties:
 
 <Figure>
 
@@ -305,7 +305,7 @@ Use `ms-<number>` and `me-<number>` utilities like `ms-4` and `me-8` to set the
 
 ### Adding space between children
 
-Use `space-x-<number>` and `space-y-<number>` utilities like `space-x-4` and `space-y-8` to control the space between elements:
+Use `space-x-<number>` or `space-y-<number>` utilities like `space-x-4` and `space-y-8` to control the space between elements:
 
 <Figure>
 

src/docs/max-height.mdx

@@ -97,7 +97,7 @@ Use `max-h-<number>` utilities like `max-h-24` and `max-h-64` to set an element
 
 ### Using a percentage
 
-Use `max-h-full` and `max-h-<fraction>` utilities like `max-h-1/2` and `max-h-2/5` to give an element a percentage-based maximum height:
+Use `max-h-full` or `max-h-<fraction>` utilities like `max-h-1/2` and `max-h-2/5` to give an element a percentage-based maximum height:
 
 <Figure>
 

src/docs/max-width.mdx

@@ -113,7 +113,7 @@ Use `max-w-<number>` utilities like `max-w-24` and `max-w-64` to set an element
 
 ### Using a percentage
 
-Use `max-w-full` and `max-w-<fraction>` utilities like `max-w-1/2` and `max-w-2/5` to give an element a percentage-based maximum width:
+Use `max-w-full` or `max-w-<fraction>` utilities like `max-w-1/2` and `max-w-2/5` to give an element a percentage-based maximum width:
 
 <Figure hint="Resize the example to see the expected behavior">