デジタル庁デザインシステムのテスト

1. このページの目的

デジタル庁デザインシステムのコンポーネントを使ってみる。

2. HTML版

2-1. Demo




3. React版

3-1. Demo


※ Reactで出力したボタンです。

3-2. 必要な作業

  1. (1) Reactプロジェクトを作る。
  2. (2) Tailwind CSSを入れる。
  3. (3) デジタル庁のTailwindテーマプラグインを入れる
  4. (4) Tailwind を設定する。(tailwind.config.js にプラグインを設定する)
  5. (5) TailwindのCSSを読み込ませる。
  6. (6) ボタンコンポーネントを出力する。
  7. (7) ビルド (npm run build) する。
  8. (8) サーバー側のHTMLファイルに、ビルドで生成されたファイルを読み込ませる。(CSS, JavaScript)
  9. (9) サーバー側のHTMLファイル内に、Reactコンポーネントを表示するHTML要素を追記する。(TailwindのCSSがページ全体に影響するので注意。リセットCSSも含まれる。)

4. 参考サイト