import { Meta } from '@storybook/blocks'

<Meta title="Guides/Tailwind/Contributing to this package" />

# Contributing

<br />

## Local Development within Kaizen

Note: While Taiwlind utilities can be used within `.stories.tsx` and `.mdx` files for documentation and layout purposes, Kaizen components will not render or compile Tailwind styles in the final bundle, i.e: `mr-8` will not apply `margin-right: $spacing-8` if added to a classname in `Button.tsx`.

### Gotchas

**New preset created but not available / rendering in DOM**

Any time you update the Tailwind presets, make sure you run `pnpm build` in the root `@kaizen/tailwind` folder.
You may also need to reload the window for these to be picked up with TW IntelliSense.

**Intellisense not working within the class attributes**

For configuring IntelliSense refer to the [Getting Started guide](/docs/guides-tailwind-getting-started--docs#tailwind-css-vscode-intellisense-plugin)

Check the output in your terminal output for TailwindCSS IntelliSense.

If you see the following:

```
Tailwind CSS: Can't resolve "@kaizen/design-tokens" in... '/Users/.../kaizen-design-system'
// OR
Tailwind CSS: Can't resolve '@kaizen/tailwind' in '/Users/.../kaizen-design-system'
```

**Solution**

Run build in both the design-tokens and tailwind package folders.

In consuming repos this will not be an issue but for local develop we are requiring on `/dist` folders having compile ts for the plugin to consume.