import { Meta, Unstyled } from '@storybook/blocks'
import { InlineNotification } from '~components/Notification'

<Meta title="Guides/Tailwind/Configuration" />

# Configuration

This page provides guidance on potential configuration options and how they work with the preset and Kaizen components.

- [Extending the Kaizen preset](#extending-the-kaizen-preset)
- [Customising the important selector](#customising-the-important-selector)

<br />

## Extending the Kaizen preset

> Extending your config is a good option when you intend to _reuse_ the style.
> If you need a value not available in our preset for a specific use case, consider using [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) instead.

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')

module.exports = {
  presets: [Preset],
  theme: {
    extend: {
      colors: {
        'myCoolNewColor': '#ffffff',
        'purple-100': 'lime',
      },
    },
  },
}
```

Here, the Kaizen preset overwrites the default Tailwind preset, and the `extend` field adds in some new values.
Be careful though! While adding in a _new_ field to `colors` won't overwrite any existing ones, passing in an existing field _will_. In this example, `purple-100` has unfortunately been overwritten.

`<p className="text-sky">...` ❌ Default TW config overwritten by `Preset`

`<p className="text-myCoolNewColor">` ✅ New color added

`<p className="text-purple-100">` ️❗️ Value from `Preset` overwritten to "Lime"

`<p className="text-purple-200">` ✅ Value from `Preset` not overwritten

<br />

## Customising the important selector

If the `"#root"` id selector is incompatible with your application wrapper or you are working with a mono-repo that needs to target a selector with lower specificity, you can change the `important` [configuration option](https://tailwindcss.com/docs/configuration#important-modifier) in your `tailwind.config.js`.

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>
```

<Unstyled>
  <InlineNotification persistent variant="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
          </li>
        </ul>
      </>
    }
  </InlineNotification>
</Unstyled>