プロジェクト名

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

インストール

npm i @directsourcing/direct-ui

セットアップ

1. Tailwind CSS を導入

Tailwind CSS の CSS を読み込む

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

  • 以下の内容を置く

@tailwind base;
@tailwind components;
@tailwind utilities;

• app.tsx で index.css を読み込む

postcss.config.js の作成

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

• 以下を追加

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

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

preset の読み込み

以下のどちらかを使用

CommonJSの構文

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

ESモジュールの構文

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

ライセンス

MIT License