@kaizen/tailwind 1.3.10 → 1.3.12

package/src/_docs/pages/borders/border-spacing.stories.tsx

@@ -1,24 +1,23 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "border-spacing-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.spacing || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'border-spacing-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.spacing ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Borders/Border Spacing",
+  title: 'Guides/Tailwind/Utility Class References/Borders/Border Spacing',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -27,9 +26,7 @@ export default {
   },
 } satisfies Meta
 
-export const BorderSpacing: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const BorderSpacing: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="border-spacing"
     classKeyValues={classEntries}
@@ -47,6 +44,5 @@ export const BorderSpacing: StoryFn<{ isReversed: boolean }> = ({
         </tbody>
       </table>
     )}
-    isReversed={isReversed}
   />
 )

package/src/_docs/pages/borders/border-width.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./border-width.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './border-width.stories'
 
 <Meta of={Examples} />
 
@@ -12,14 +12,13 @@ import * as Examples from "./border-width.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="p-24 font-family-paragraph">
       <p>
-        This document demonstrates the list of border-width suffixes available
-        from the Kaizen preset, by showing what they look like on the
-        &apos;border-&apos; prefix.
+        This document demonstrates the list of border-width suffixes available from the Kaizen
+        preset, by showing what they look like on the &apos;border-&apos; prefix.
       </p>
       <p>
-        Note that there are other border-width prefixes (such as `border-l-`
-        for `border-left-width`) that can be used instead. Available
-        border-width prefixes can be referenced <a href="https://tailwindcss.com/docs/border-width">here</a>.
+        Note that there are other border-width prefixes (such as `border-l-` for
+        `border-left-width`) that can be used instead. Available border-width prefixes can be
+        referenced <a href="https://tailwindcss.com/docs/border-width">here</a>.
       </p>
     </div>
   </Card>

package/src/_docs/pages/borders/border-width.stories.tsx

@@ -1,25 +1,24 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "border-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.borderWidth || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'border-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.borderWidth ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Borders/Border Width",
+  title: 'Guides/Tailwind/Utility Class References/Borders/Border Width',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[1].utilityClassName),
@@ -28,20 +27,17 @@ export default {
   },
 } satisfies Meta
 
-export const BorderWidth: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const BorderWidth: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="border-width"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
       <div
         className={classnames(
-          "w-[100px] h-[100px] border rounded",
-          !utilityClass.includes("-DEFAULT") && utilityClass
+          'w-[100px] h-[100px] border rounded',
+          !utilityClass.includes('-DEFAULT') && utilityClass,
         )}
       />
     )}
-    isReversed={isReversed}
   />
 )

package/src/_docs/pages/configuration.mdx

@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
+import { Meta } from '@storybook/blocks'
+import { InlineNotification } from '~components/Notification'
 
 <Meta title="Guides/Tailwind/Configuration" />
 
@@ -10,7 +10,7 @@ This page provides guidance on potential configuration options and how they work
 - [Extending the Kaizen preset](#extending-the-kaizen-preset)
 - [Customising the important selector](#customising-the-important-selector)
 
-<br/>
+<br />
 
 ## Extending the Kaizen preset
 
@@ -20,18 +20,18 @@ This page provides guidance on potential configuration options and how they work
 To extend upon the preset with values specific to your project, we recommend passing a theme object to `theme.extend`.
 
 ```js
-const { Preset } = require("@kaizen/tailwind")
+const { Preset } = require('@kaizen/tailwind')
 
 module.exports = {
   presets: [Preset],
   theme: {
     extend: {
       colors: {
-        myCoolNewColor: "#ffffff",
-        "purple-100": "lime"
-      }
-    }
-  }
+        'myCoolNewColor': '#ffffff',
+        'purple-100': 'lime',
+      },
+    },
+  },
 }
 ```
 
@@ -46,7 +46,7 @@ Be careful though! While adding in a _new_ field to `colors` won't overwrite any
 
 `<p className="text-purple-200">` ✅ Value from `Preset` not overwritten
 
-<br/>
+<br />
 
 ## Customising the important selector
 
@@ -54,25 +54,21 @@ If the `"#root"` id selector is incompatible with your application wrapper or yo
 
 If this is changed or you are not using the [Frontend Template](https://github.com/cultureamp/frontend-template), be sure that the `important` selector matches to an `id`, `class`, or `HTML Element` within your application, ie:
 
-``` tsx
-<div id="#root">
- {/* Application code */}
-</div>
+```tsx
+<div id="#root">{/* Application code */}</div>
 ```
 
-<InlineNotification
-  persistent
-  type="cautionary"
-  style="inline"
-  title="Changing the selector"
->
-  We advise using an <code>id</code> with <code>&quot;#root&quot;</code> as the default selector. Using different id&apos;s, classes or HTML elements like <code>body</code> as the selector could result in:
+<InlineNotification persistent type="cautionary" style="inline" title="Changing the selector">
+  We advise using an <code>id</code> with <code>&quot;#root&quot;</code> as the default selector.
+  Using different id&apos;s, classes or HTML elements like <code>body</code> as the selector could
+  result in:
   <ul>
     <li>
       Utility classes not superseding Kaizen defaults when using <code>classNameOverride</code>
     </li>
     <li>
-      Duplication of utillity classes in your CSS bundle caused by consuming components with different <code>important</code> selectors
+      Duplication of utillity classes in your CSS bundle caused by consuming components with
+      different <code>important</code> selectors
     </li>
   </ul>
 </InlineNotification>

package/src/_docs/pages/contributing.mdx

@@ -1,10 +1,10 @@
-import { Meta } from "@storybook/blocks"
+import { Meta } from '@storybook/blocks'
 
 <Meta title="Guides/Tailwind/Contributing to this package" />
 
 # Contributing
 
-<br/>
+<br />
 
 ## Local Development within Kaizen
 

package/src/_docs/pages/effects/shadow.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./shadow.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './shadow.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/effects/shadow.stories.tsx

@@ -1,25 +1,24 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "shadow-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.boxShadow || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'shadow-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.boxShadow ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Effects/Box Shadow",
+  title: 'Guides/Tailwind/Utility Class References/Effects/Box Shadow',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -28,13 +27,12 @@ export default {
   },
 } satisfies Meta
 
-export const BoxShadow: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
+export const BoxShadow: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="box-shadow"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
-      <div className={classnames("w-[100px] h-[100px]", utilityClass)} />
+      <div className={classnames('w-[100px] h-[100px]', utilityClass)} />
     )}
-    isReversed={isReversed}
   />
 )

package/src/_docs/pages/getting-started.mdx

@@ -1,7 +1,7 @@
-import { Meta } from "@storybook/blocks"
-import CssGeneration from "../assets/css-generation.png"
-import InlineFold from "../assets/inline-fold.gif"
-import TailwindPlay from "../assets/tailwind-play.gif"
+import { Meta } from '@storybook/blocks'
+import CssGeneration from '../assets/css-generation.png'
+import InlineFold from '../assets/inline-fold.gif'
+import TailwindPlay from '../assets/tailwind-play.gif'
 
 <Meta title="Guides/Tailwind/Getting Started" />
 
@@ -18,7 +18,7 @@ If your project was created from this template, you should only need to do [Step
 - [3. Add the Tailwind directives](#3-add-the-tailwind-directives)
 - [4. Useful tools](#4-useful-tools)
 
-<br/>
+<br />
 
 ## 1. Install the preset
 
@@ -34,15 +34,15 @@ This will override the default Tailwind preset, and make ours available for use.
 ```js
 // tailwind.config.js
 
-const { Preset } = require("@kaizen/tailwind")
+const { Preset } = require('@kaizen/tailwind')
 
 module.exports = {
   // Glob pattern to match files containing TW classes. May be different for your project.
-  content: ["./**/*.{ts,tsx}"],
+  content: ['./**/*.{ts,tsx}'],
   // Override the default Tailwind preset with the Kaizen one.
   presets: [Preset],
   // This should be a selector that wraps your app. It ensures that your Tailwind classes supersede component styles, by increasing their specificity with the chosen selector.
-  important: "#root",
+  important: '#root',
   // Preflight is a heavy-handed css reset. We recommend disabling it in your project.
   corePlugins: {
     preflight: false,
@@ -109,12 +109,12 @@ Ideally you only add the pattern that is used in your repo.
 Calling out that this is still an experimental feature for the VSCode plugin.
 
 ### Inline fold VSCode extension
+
 Using tailwind often results in long class names, that can even span over multiple lines.
 Inline fold is a great extension that hides/ shows long class strings.
 
 Check it out [here](https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold):
 
-
 <div className="flex justify-center">
   <img src={InlineFold} alt="Inline fold VSCode extension" />
 </div>

package/src/_docs/pages/modifiers/media-queries.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./media-queries.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './media-queries.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/modifiers/media-queries.stories.tsx

@@ -1,17 +1,16 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { Heading } from "~components/Heading"
-import { Text } from "~components/Text"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import { Heading } from '~components/Heading'
+import { Text } from '~components/Text'
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Modifiers/Media Queries",
+  title: 'Guides/Tailwind/Utility Class References/Modifiers/Media Queries',
   parameters: {
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       a11y: { disable: true },
       description: {
-        component:
-          "Require @kaizen/tailwind and add it into your tailwind config",
+        component: 'Require @kaizen/tailwind and add it into your tailwind config',
       },
     },
   },
@@ -22,11 +21,7 @@ type QueryInfoProps = {
   selectorValue: string
   children: React.ReactElement
 }
-const QueryInfo = ({
-  selector,
-  selectorValue,
-  children,
-}: QueryInfoProps): React.ReactElement => (
+const QueryInfo = ({ selector, selectorValue, children }: QueryInfoProps): React.ReactElement => (
   <div className="my-12">
     <Text variant="intro-lede">Pseudo selector: {selector}</Text>
     <Text variant="body">Breakpoint: {selectorValue}</Text>
@@ -39,8 +34,8 @@ const QueryInfo = ({
 export const MediaQueries: StoryFn = () => (
   <div className="py-32">
     <Heading tag="p" variant="heading-4" classNameOverride="text-center">
-      These breakpoints activate <em>over</em> a certain screen width. Meaning
-      that bg-blue-400 will be applied when the screen gets <em>wider</em>.
+      These breakpoints activate <em>over</em> a certain screen width. Meaning that bg-blue-400 will
+      be applied when the screen gets <em>wider</em>.
     </Heading>
     <QueryInfo selector="md" selectorValue="768px">
       <div className="border-solid md:bg-blue-400 h-[50px] w-full rounded" />
@@ -54,26 +49,21 @@ export const MediaQueries: StoryFn = () => (
 export const ArbitraryMediaQueries: StoryFn = () => (
   <div className="py-32">
     <Heading tag="p" variant="heading-4" classNameOverride="text-center">
-      Bespoke, one-off media queries can be created with arbitrary values. See
-      the{" "}
-      <a href="https://tailwindcss.com/docs/responsive-design#arbitrary-values">
-        Tailwind docs
-      </a>{" "}
+      Bespoke, one-off media queries can be created with arbitrary values. See the{' '}
+      <a href="https://tailwindcss.com/docs/responsive-design#arbitrary-values">Tailwind docs</a>{' '}
       for more info.
     </Heading>
 
     <div className="py-32">
       <Text variant="body">
-        <strong>Min-width breakpoint</strong> (applied when the screen gets{" "}
-        <em>wider</em>)
+        <strong>Min-width breakpoint</strong> (applied when the screen gets <em>wider</em>)
       </Text>
       <Text variant="body">In this example: min-[500px]:bg-blue-400</Text>
       <div className="border-solid min-[500px]:bg-blue-400 h-[50px] w-full rounded-default" />
     </div>
 
     <Text variant="body">
-      <strong>Max-width breakpoint</strong> (applied when the screen gets{" "}
-      <em>slimmer</em>)
+      <strong>Max-width breakpoint</strong> (applied when the screen gets <em>slimmer</em>)
     </Text>
     <Text variant="body">In this example: max-[500px]:bg-blue-400</Text>
     <div className="border-solid max-[500px]:bg-blue-400 h-[50px] w-full rounded-default" />

package/src/_docs/pages/modifiers/pseudo-states.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./pseudo-states.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './pseudo-states.stories'
 
 <Meta of={Examples} />
 
@@ -12,8 +12,8 @@ import * as Examples from "./pseudo-states.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="font-family-paragraph p-24">
       <p>
-        Pseudo selectors can be used to apply standard Tailwind utility
-        classes under certain pseudo states, such as on hover or focus.
+        Pseudo selectors can be used to apply standard Tailwind utility classes under certain pseudo
+        states, such as on hover or focus.
       </p>
       <p>
         Read more on Tailwind&apos;s pseudo selectors

package/src/_docs/pages/modifiers/pseudo-states.stories.tsx

@@ -1,30 +1,24 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { StickerSheet } from "~storybook/components/StickerSheet"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import { StickerSheet } from '~storybook/components/StickerSheet'
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Modifiers/Pseudo Selectors",
+  title: 'Guides/Tailwind/Utility Class References/Modifiers/Pseudo Selectors',
   parameters: {
     a11y: { disable: true },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component:
-          "Add a modifier before a standard tailwind utility class to have it apply in certain states. For example, hover:text-blue-500 will set the font color to blue-500 on hover.",
+          'Add a modifier before a standard tailwind utility class to have it apply in certain states. For example, hover:text-blue-500 will set the font color to blue-500 on hover.',
       },
     },
   },
 } satisfies Meta
 
-export const PseudoSelectors: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
-  <StickerSheet isReversed={isReversed}>
-    <StickerSheet.Header
-      headings={["Utility Class", "Compiled CSS", "Example"]}
-    />
-    <StickerSheet.Row rowTitle="hover">
+export const PseudoSelectors: StoryFn = () => (
+  <StickerSheet headers={['Utility Class', 'Compiled CSS', 'Example']}>
+    <StickerSheet.Row header="hover">
       <p className="font-family-paragraph">hover:bg-blue-200</p>
       <p className="font-family-paragraph">background-color: #bde2f5</p>
       <button
@@ -34,7 +28,7 @@ export const PseudoSelectors: StoryFn<{ isReversed: boolean }> = ({
         Hover me
       </button>
     </StickerSheet.Row>
-    <StickerSheet.Row rowTitle="focus">
+    <StickerSheet.Row header="focus">
       <p className="font-family-paragraph">focus:bg-blue-200</p>
       <p className="font-family-paragraph">background-color: #bde2f5</p>
       <button

package/src/_docs/pages/overview.mdx

@@ -1,26 +1,27 @@
-import { Meta } from "@storybook/blocks"
-import AnatomyDiagram from "../assets/tw-anatomy.png"
+import { Meta } from '@storybook/blocks'
+import AnatomyDiagram from '../assets/tw-anatomy.png'
 
 <Meta title="Guides/Tailwind/Overview" />
 
 # Overview
 
-<br/>
+<br />
 
 ## Caveat before use
+
 This is an early release of the Kaizen Tailwind Preset - the API may change and evolve as we receive feedback from our teams. We will endeavour to assist where possible if classes or utilities are updated in the future.
 
 ## What our package does
+
 The `@kaizen/tailwind` package is essentially a custom Tailwind preset. For more information about Tailwind presets, see their docs [here](https://tailwindcss.com/docs/presets). This package does not change how Tailwind works; it only defines the suffixes that can be applied when constructing utility classes.
 To see a list of utilities generated by our preset, see our [Utility Class Reference Docs](/story/systems-tailwind-utility-class-references-utility-class-references--page).
 The following diagram shows the construction of a utility class that adds a background of `blue-400` on hover. The modifier `hover:` and the prefix `bg-` are part of Tailwind by default. The suffix `gray-400` is defined by our preset, and represents one of our color design tokens.
 
-
 <img src={AnatomyDiagram} alt="Tailwind utility class anatomy" />
 
 ```css
 .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 139 214 / var(--tw-bg-opacity))
+  background-color: rgb(0 139 214 / var(--tw-bg-opacity));
 }
 ```

package/src/_docs/pages/spacing/margin.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./margin.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './margin.stories'
 
 <Meta of={Examples} />
 
@@ -12,12 +12,12 @@ import * as Examples from "./margin.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="font-family-paragraph p-24">
       <p>
-        The padding prefix &apos;m-&apos; has been used in the examples in this
-        document, which compiles to the `margin` property in CSS.
+        The padding prefix &apos;m-&apos; has been used in the examples in this document, which
+        compiles to the `margin` property in CSS.
       </p>
       <p>
-        Note that there are other prefixes (such as `ml-` for `margin-left`)
-        that can be used instead. Available padding prefixes can be referenced
+        Note that there are other prefixes (such as `ml-` for `margin-left`) that can be used
+        instead. Available padding prefixes can be referenced
         <a href="https://tailwindcss.com/docs/margin#basic-usage">here</a>.
       </p>
     </div>