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" />

# Getting Started

This page describes the steps needed to use our [Kaizen Tailwind preset](https://github.com/cultureamp/kaizen-design-system/tree/main/packages/tailwind), not Tailwind itself.
To learn more about Tailwind and how to install it in your project, check out there docs [here](https://tailwindcss.com/docs/installation).

Note: Projects created from [frontend-template](https://github.com/cultureamp/frontend-template) should have steps 1 - 3 completed out of the box.
If your project was created from this template, you should only need to do [Step 4: Useful tools](#4-useful-tools).

- [1. Install the preset](#1-install-the-preset)
- [2. Implement the preset](#2-implement-the-preset)
- [3. Add the Tailwind directives](#3-add-the-tailwind-directives)
- [4. Useful tools](#4-useful-tools)

<br />

## 1. Install the preset

```bash
pnpm add -D @kaizen/tailwind
```

## 2. Implement the Preset

In your tailwind config file, import the preset and add it to your `presets` array.
This will override the default Tailwind preset, and make ours available for use.

```js
// tailwind.config.js

const { Preset } = require('@kaizen/tailwind')

module.exports = {
  // Glob pattern to match files containing TW classes. May be different for your project.
  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',
  // Preflight is a heavy-handed css reset. We recommend disabling it in your project.
  corePlugins: {
    preflight: false,
  },
}
```

For preset configuration options, see our [configuration docs](/docs/guides-tailwind-configuration--docs).

## 3. Add the Tailwind Directives

The following directives need to be included in your project's main css file.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

These directives inject classes that are needed for certain Tailwind features.
For more information, see [here](https://tailwindcss.com/docs/functions-and-directives).

## 4. Useful tools

### Tailwind Play

Tailwind Play is an online code sandbox with Tailwind set up out of the box. The Kaizen Team has created an instance with the Kaizen Preset values [here](https://play.tailwindcss.com/OUogvUgXQR)

Use this playground to get familiar with our preset, test out new config extensions, create a quick proof of concept, or share code examples with other engineers. Feel free to hit &apos;Share&apos; - it&apos;ll create a new url without overriding the one provided here.

<img src={TailwindPlay} alt="Tailwind Play" />

The playground also has a great “Generated CSS” feature that let&apos;s you see which css classes are generated by your preset when you implement tailwind utilities. It&apos;s a great way to see what Tailwind is doing under the hood.

<div className="flex justify-center">
  <img src={CssGeneration} alt="CSS Generation" />
</div>

### Tailwind CSS VSCode IntelliSense plugin

Basic config for the [VSCode plugin](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) for Tailwind IntelliSense lives in your project's `settings.json`.

You can customise which keywords trigger IntelliSense using basic strings, or even regex expressions.
Here are some examples you may wish to include in your own project:

```
"tailwindCSS.classAttributes": [
  "class",
  "className",
  "ngClass",
  "classNameOverride"
],
"tailwindCSS.experimental.classRegex": [
  "classnames\\(([^)]*)\\)",
  "classNames\\(([^)]*)\\)",
  "clsx\\(([^)]*)\\)",
  "csx\\(([^)]*)\\)"
]
```

`tailwindCSS.experimental.classRegex` is used to provide intelliSense within your `classnames` functions in your codebase.
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>

### Prettier plugin

Tailwind now has prettier support! 🎉 This [prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) will order your classnames for you.
We&apos;d highly recommend it for the sake of consistency. The Tailwind docs even have a guide [here](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier).