# プロジェクト名

株式会社ダイレクトソーシングのデザインシステムのデザイントークンとコンポーネントライブラリを実装したパッケージです。
React と Tailwind CSS で作られています。

## インストール

```
npm i @directsourcing/direct-ui
```

## セットアップ

### 1. Tailwind CSS を導入

#### Tailwind CSS の CSS を読み込む

- `index.css` (名前は任意) を作成

  - 以下の内容を置く

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

- `app.tsx` で `index.css` を読み込む

#### `postcss.config.js` の作成

- `postcss.config.js` が存在しない場合は作成する。

- 以下を追加

```js
plugins: {
  tailwindcss: {},
  autoprefixer: {},
  // ...
}
```

### 2. Direct UI の設定を読み込む

#### preset の読み込み

以下のどちらかを使用

CommonJSの構文

```js
preset: [require('@directsourcing/direct-ui/tailwind.config.js')],
```

ESモジュールの構文

```js
import directUiTailwindConfig from "@directsourcing/direct-ui/tailwind.config.js";
  presets: [directUiTailwindConfig],
```

## ライセンス

MIT License