import { Meta, Unstyled } from '@storybook/blocks'
import { LinkTo } from '~storybook/components/LinkTo'
import CopyUtilityClass from '~tailwind/_docs/assets/copy-utility-class.gif?url'
import UtilitySearchResult from '~tailwind/_docs/assets/utility-search-result.png?url'
import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'

<Meta title="Guides/Tailwind/Utility Class References/Overview" />

# Utility Class References

The Utility Class References section provides a list of utilities made available through the `@kaizen/tailwind` preset.
For more information on the preset itself, see <LinkTo pageId="systems-tailwind-overview">here</LinkTo>.

Note that this section only provides references for Kaizen's _custom_ utilities.
In other words, if you can't find a utility class here, it's probably because it's unchanged from the Tailwind default.
As an example, `borderColor` is listed in this section because we have a custom preset for it. `width` is _not_ here however, because it's unchanged from the Tailwind Default, and you can search for it in their [docs](https://tailwindcss.com/docs/width).

- [Structure](#structure)
- [Example usage](#example-usage)

<br />

## Structure

The references provide the following structure for each utility class:

<Unstyled>
  <div className="w-100">
    <TailwindStoryTemplate
      compiledCssPropertyName="width"
      classKeyValues={[{ utilityClassName: 'text-heading-1', cssProperty: '2.125rem' }]}
      renderExampleComponent={(cssProperty) => <p style={{ fontSize: cssProperty }}>Aa</p>}
    />
  </div>
</Unstyled>

<br />
<br />

### Utility Class

This is the name of the utility class itself. This is the string that you pass to `class` or `className`.

### Compiled CSS

Represents the CSS property that Tailwind will compile for you when it recognizes the corresponding utility class.

### Example

A visual representation of the CSS generated by the utility class. You can inspect this element in the DOM to see the utility class in action.

<br />

## Example usage

**Goal:** Add our default border radius (`7px`) to the following component.

```html
<div className="border-solid w-max border-blue-500 bg-blue-100 px-12">
  <p className="font-family-paragraph text-blue-700">Example</p>
</div>
```

### 1. Locate the Border Radius docs

<div className="max-w-[600px]">
  <img src={UtilitySearchResult} alt="Utility class search result" />
</div>

<p>
  Can&apos;t find it here? That means we don&apos;t have a custom preset for it, and the utility
  class you need will be unchanged from the Tailwind Default.
</p>
<p>Search in the [Tailwind docs](https://tailwindcss.com/docs/installation) instead.</p>

<br />
<br />

### 2. Find the utility class that compiles to the desired CSS, and copy it

<img src={CopyUtilityClass} alt="Copy utility class" />

<br />
<br />

### 3. Add the utility class to the element

```tsx
<div className="rounded ...">...</div>
```

```html
<div className="rounded border-solid w-max border-blue-500 bg-blue-100 px-12">
  <p className="font-family-paragraph text-blue-700">Example</p>
</div>
```