diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md index 4f5f7f8dda9f..6ab0a6aa3718 100644 --- a/docs/source/docs/border-radius.blade.md +++ b/docs/source/docs/border-radius.blade.md @@ -152,7 +152,7 @@ Use the `.rounded-t`, `.rounded-r`, `.rounded-b`, or `.rounded-l` utilities to o ## Responsive -To control the border radius of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing border radius utility. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above. +To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation. diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md index aeec16c37f22..33fb9f2f423e 100644 --- a/docs/source/docs/flexbox-align-content.blade.md +++ b/docs/source/docs/flexbox-align-content.blade.md @@ -183,7 +183,7 @@ Use `.content-around` to distribute lines in a flex container such that there is ## Responsive -To control the alignment of flex content at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above. +To control the alignment of flex content at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md index a4db508e3385..39903418531f 100644 --- a/docs/source/docs/flexbox-align-items.blade.md +++ b/docs/source/docs/flexbox-align-items.blade.md @@ -123,7 +123,7 @@ Use `.items-baseline` to align items along the flex container's cross axis such ## Responsive -To control the alignment of flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:items-center` to apply the `items-center` utility at only medium screen sizes and above. +To control the alignment of flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:items-center` to apply the `items-center` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md index 0363ab57a0e9..1de5c8d2c495 100644 --- a/docs/source/docs/flexbox-align-self.blade.md +++ b/docs/source/docs/flexbox-align-self.blade.md @@ -117,7 +117,7 @@ Use `.self-stretch` to stretch an item to fill the flex container's cross axis, ## Responsive -To control the alignment of a flex item at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above. +To control the alignment of a flex item at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md index 776bb87c7649..149beff46567 100644 --- a/docs/source/docs/flexbox-direction.blade.md +++ b/docs/source/docs/flexbox-direction.blade.md @@ -100,7 +100,7 @@ Use `.flex-col-reverse` to position flex items vertically in the opposite direct ## Responsive -To apply a flex direction utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` utility at medium screen sizes and above. +To apply a flex direction utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` 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. diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md index 885572deb4a5..1e4a29dd3e62 100644 --- a/docs/source/docs/flexbox-display.blade.md +++ b/docs/source/docs/flexbox-display.blade.md @@ -66,7 +66,7 @@ Use `.inline-flex` to create an inline flex container: ## Responsive -To control the display property of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing display utility class. For example, use `md:inline-flex` to apply the `inline-flex` utility at only medium screen sizes and above. +To control the display property of an element at a specific breakpoint, add a `{screen}:` prefix to any existing display utility class. For example, use `md:inline-flex` to apply the `inline-flex` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md index a96e4264f7e2..add271136c6a 100644 --- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md +++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md @@ -304,7 +304,7 @@ Use `.flex-no-shrink` to prevent a flex item from shrinking: ## Responsive -To control how a flex item grows or shrinks at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:flex-no-shrink` to apply the `flex-no-shrink` utility at only medium screen sizes and above. +To control how a flex item grows or shrinks at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-no-shrink` to apply the `flex-no-shrink` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md index f0d99eb45158..30723d5a8e54 100644 --- a/docs/source/docs/flexbox-justify-content.blade.md +++ b/docs/source/docs/flexbox-justify-content.blade.md @@ -123,7 +123,7 @@ Use `.justify-around` to justify items along the flex container's main axis such ## Responsive -To justify flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:justify-between` to apply the `justify-between` utility at only medium screen sizes and above. +To justify flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:justify-between` to apply the `justify-between` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md index 0bcdd68c2302..6334f7416dfc 100644 --- a/docs/source/docs/flexbox-wrapping.blade.md +++ b/docs/source/docs/flexbox-wrapping.blade.md @@ -101,7 +101,7 @@ Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: ## Responsive -To control how flex items wrap at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above. +To control how flex items wrap at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md index ae365ce07feb..bc2551e3a668 100644 --- a/docs/source/docs/opacity.blade.md +++ b/docs/source/docs/opacity.blade.md @@ -72,7 +72,7 @@ title: "Opacity" ## Responsive -To control the opacity of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing opacity utility. For example, use `md:opacity-50` to apply the `opacity-50` utility at only medium screen sizes and above. +To control the opacity of an element at a specific breakpoint, add a `{screen}:` prefix to any existing opacity utility. For example, use `md:opacity-50` to apply the `opacity-50` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation. diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md index aa48af6dd1a4..929e72b99143 100644 --- a/docs/source/docs/overflow.blade.md +++ b/docs/source/docs/overflow.blade.md @@ -164,7 +164,7 @@ Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, ## Responsive -To apply an overflow utility only at a specific breakpoint, add a `{breakpoint}:` 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 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. For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation. diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md index e8bc5d8eab00..7ea328ae731f 100644 --- a/docs/source/docs/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -400,7 +400,7 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin ## Responsive -To position an element only at a specific breakpoint, add a `{breakpoint}:` prefix to any existing positioning utility. For example, adding the class `md:absolute` to an element would apply the `absolute` utility at medium screen sizes and above, and adding `lg:pin-y` would apply `pin-y` at large screens and above. +To position an element only at a specific breakpoint, add a `{screen}:` prefix to any existing positioning utility. For example, adding the class `md:absolute` to an element would apply the `absolute` utility at medium screen sizes and above, and adding `lg:pin-y` would apply `pin-y` at large screens and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation. diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index 316abcca96c3..525995557fdb 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -103,7 +103,7 @@ This is most commonly used to remove a shadow that was applied at a smaller brea ## Responsive -To control the shadow of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above. +To control the shadow of an element at a specific breakpoint, add a `{screen}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation. diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md index 72bb4cd3daae..e79968ad6ea5 100644 --- a/docs/source/docs/visibility.blade.md +++ b/docs/source/docs/visibility.blade.md @@ -66,7 +66,7 @@ Use `.invisible` to hide an element, but still maintain it's space. ## Responsive -To apply an overflow utility only at a specific breakpoint, add a `{breakpoint}:` 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 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. For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation. diff --git a/docs/source/docs/what-is-tailwind.blade.md b/docs/source/docs/what-is-tailwind.blade.md index ca93a0b35982..45bd45c2858d 100644 --- a/docs/source/docs/what-is-tailwind.blade.md +++ b/docs/source/docs/what-is-tailwind.blade.md @@ -102,7 +102,7 @@ Tailwind provides tools for [extracting component classes](/docs/extracting-comp Every Tailwind utility also comes in responsive flavors, making it extremely easy to build responsive interfaces without ever leaving your HTML. -Tailwind uses an intuitive `{breakpoint}:` prefix that makes it easy to notice responsive classes in your markup while keeping the original class name recognizable and in tact. +Tailwind uses an intuitive `{screen}:` prefix that makes it easy to notice responsive classes in your markup while keeping the original class name recognizable and in tact. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md index 19ff1a6d401a..21f83d0be308 100644 --- a/docs/source/docs/z-index.blade.md +++ b/docs/source/docs/z-index.blade.md @@ -93,7 +93,7 @@ Control the stack order (or three-dimensional positioning) of an element in Tail ## Responsive -To control the z-index of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing z-index utility. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above. +To control the z-index of an element at a specific breakpoint, add a `{screen}:` prefix to any existing z-index utility. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation.