import { Meta } from '@storybook/blocks'
import AnatomyDiagram from '../assets/tw-anatomy.png'

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

# Overview

<br />

## 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](/docs/guides-tailwind-utility-class-references-overview--docs).
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));
}
```