Clarify usage of outline utilities in documentation (#2071)

jaykumarcunomial · philipp-spiess · web-flow · commit 7dfb48237eaf · 2025-02-10T17:40:57.000+01:00
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-&lt;number&gt;` utilities can be used to set the width
of an element's outline.

---------

Co-authored-by: Philipp Spiess &lt;hello@philippspiess.com&gt;
diff --git a/src/docs/background-size.mdx b/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
 
diff --git a/src/docs/border-width.mdx b/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>
 
diff --git a/src/docs/box-shadow.mdx b/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>
 
diff --git a/src/docs/gap.mdx b/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>
 
diff --git a/src/docs/grid-column.mdx b/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>
 
diff --git a/src/docs/grid-row.mdx b/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>
 
diff --git a/src/docs/height.mdx b/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>
 
diff --git a/src/docs/margin.mdx b/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>
 
diff --git a/src/docs/max-height.mdx b/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>
 
diff --git a/src/docs/max-width.mdx b/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">
 
diff --git a/src/docs/min-height.mdx b/src/docs/min-height.mdx
@@ -84,7 +84,7 @@ Use `min-h-<number>` utilities like `min-h-24` and `min-h-64` to set an element
 
 ### Using a percentage
 
-Use `min-h-full` and `min-h-<fraction>` utilities like `min-h-1/2`, and `min-h-2/5` to give an element a percentage-based minimum height:
+Use `min-h-full` or `min-h-<fraction>` utilities like `min-h-1/2`, and `min-h-2/5` to give an element a percentage-based minimum height:
 
 <Figure>
 
diff --git a/src/docs/min-width.mdx b/src/docs/min-width.mdx
@@ -80,7 +80,7 @@ Use `min-w-<number>` utilities like `min-w-24` and `min-w-64` to set an element
 
 ### Using a percentage
 
-Use `min-w-full` and `min-w-<fraction>` utilities like `min-w-1/2` and `min-w-2/5` to give an element a percentage-based minimum width:
+Use `min-w-full` or `min-w-<fraction>` utilities like `min-w-1/2` and `min-w-2/5` to give an element a percentage-based minimum width:
 
 <Figure>
 
diff --git a/src/docs/outline-width.mdx b/src/docs/outline-width.mdx
@@ -19,7 +19,7 @@ export const description = "Utilities for controlling the width of an element's
 
 ### Basic example
 
-Use `outline` and `outline-<number>` utilities like `outline-2` and `outline-4` to set the width of an element's outline:
+Use `outline` or `outline-<number>` utilities like `outline-2` and `outline-4` to set the width of an element's outline:
 
 <Figure>
 
diff --git a/src/docs/padding.mdx b/src/docs/padding.mdx
@@ -157,7 +157,7 @@ Use `py-<number>` utilities like `py-4` and `py-8` to control the vertical paddi
 
 ### Using logical properties
 
-Use `ps-<number>` and `pe-<number>` utilities like `ps-4` and `pe-8` to set the `padding-inline-start` and `padding-inline-end` logical properties, which map to either the left or right side based on the text direction:
+Use `ps-<number>` or `pe-<number>` utilities like `ps-4` and `pe-8` to set the `padding-inline-start` and `padding-inline-end` logical properties, which map to either the left or right side based on the text direction:
 
 <Figure>
 
diff --git a/src/docs/scale.mdx b/src/docs/scale.mdx
@@ -267,7 +267,7 @@ Use the `scale-y-<number>` utilities like `scale-y-75` and `-scale-y-150` to sca
 
 ### Using negative values
 
-Use `-scale-<number>`, `-scale-x-<number>` and `-scale-y-<number>` utilities like `-scale-x-75` and `-scale-125` to mirror and scale down an element by a percentage of its original size:
+Use `-scale-<number>`, `-scale-x-<number>` or `-scale-y-<number>` utilities like `-scale-x-75` and `-scale-125` to mirror and scale down an element by a percentage of its original size:
 
 <Figure>
 
diff --git a/src/docs/top-right-bottom-left.mdx b/src/docs/top-right-bottom-left.mdx
@@ -201,7 +201,7 @@ To use a negative top/right/bottom/left value, prefix the class name with a dash
 
 ### Using logical properties
 
-Use `start-<number>` and `end-<number>` utilities like `start-0` and `end-4` to set the `inset-inline-start` and `inset-inline-end` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right side based on the text direction:
+Use `start-<number>` or `end-<number>` utilities like `start-0` and `end-4` to set the `inset-inline-start` and `inset-inline-end` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right side based on the text direction:
 
 <Figure>
 
diff --git a/src/docs/translate.mdx b/src/docs/translate.mdx
@@ -212,7 +212,7 @@ Use `translate-<fraction>` utilities like `translate-1/4` and `-translate-full`
 
 ### Translating on the x-axis
 
-Use `translate-x-<number>` and `translate-x-<fraction>` utilities like `translate-x-4` and `translate-x-1/4` to translate an element on the x-axis:
+Use `translate-x-<number>` or `translate-x-<fraction>` utilities like `translate-x-4` and `translate-x-1/4` to translate an element on the x-axis:
 
 <Figure>
 
@@ -296,7 +296,7 @@ Use `translate-x-<number>` and `translate-x-<fraction>` utilities like `translat
 
 ### Translating on the y-axis
 
-Use `translate-y-<number>` and `translate-y-<fraction>` utilities like `translate-y-6` and `translate-y-1/3` to translate an element on the y-axis:
+Use `translate-y-<number>` or `translate-y-<fraction>` utilities like `translate-y-6` and `translate-y-1/3` to translate an element on the y-axis:
 
 <Figure>
 
diff --git a/src/docs/width.mdx b/src/docs/width.mdx
@@ -96,7 +96,7 @@ Use `w-<number>` utilities like `w-24` and `w-64` to set an element to a fixed w
 
 ### Using a percentage
 
-Use `w-full` and `w-<fraction>` utilities like `w-1/2` and `w-2/5` to give an element a percentage-based width:
+Use `w-full` or `w-<fraction>` utilities like `w-1/2` and `w-2/5` to give an element a percentage-based width:
 
 <Figure>
 
