Merge pull request #29 from pedroborges/add-screen-class-name-sample

Use "screen" instead of "breakpoint"

Author: adamwathan

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.
 

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.
 

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.
 

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.
 

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.
 

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.
 

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.
 

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.
 

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.
 

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.