React開発環境にtailwindcss等をインストール

目的

下記パッケージをインストールし、動作確認を行う。

前提

Vite + React開発環境をDockerコンテナで構築にて環境を構築していること。

下記コマンドでnode-reactコンテナ内へ入って作業する。

% docker container exec -it node-react /bin/bash

tailwindcss

インストール

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

tailwind.config.js の編集

下記内容のように編集する。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/*.tsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/App.tsx の編集

下記内容のように編集する。
（デフォルトの表示内容をコメントアウトや削除して、h1タグにtailwindcssのクラスを指定しただけ）

function App() {
  return (
    <>
        <h1 className="bg-red-500">あいうえお</h1>
    </>
  )
}

export default App

src/index.css の編集

下記内容のように編集する。
（デフォルトのCSSをコメントアウトや削除をして、tailwindcss用の3行を追加しただけ）

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

tailwindcss の動作確認

開発用サーバを起動し、Webブラウザでアクセスして、

「あいうえお」の背景色が赤になっていれば良い。

daisyUI

前提

上記のtailwindcssをインストール済み。

インストール

$ npm install -D daisyui@latest

tailwind.config.js の編集

下記内容のように編集する。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/*.tsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    // daisyUI
    require("daisyui"),
  ],
}

src/App.tsx の編集

下記内容のように編集する。

function App() {
  return (
      <>
          <h1 className="bg-red-500">あいうえお</h1>
          <button className="btn btn-primary">primary</button><br/>
      </>
  )
}

export default App

daisyUI の動作確認

開発用サーバを起動し、Webブラウザでアクセスして、

「あいうえお」の下にdaisyUIのボタンが表示されれば良い。

iconify

前提

上記のdaisyUIをインストール済み。

インストール

# npm install -D @iconify/tailwind

// 動作確認用のアイコンセットのインストール。
# npm install -D @iconify-json/material-symbols

アイコンセットの補足

アイコンセットを確認するには次のサイトで好みのアイコンを含むアイコンセットを確認する。

Open Source Icon Sets - Iconify

Open source vector icons from all popular icon sets: 217419 icons from 157 icon sets.

次のGitHubページで、指定したいアイコンセットのprefixの値を確認する。

icon-sets/json at master · iconify/icon-sets

150+ open source icon sets. Icons are validated, cleaned up, optimised, ready to render as SVG. Updated automatically 3 ...

確認したprefixの値が「abc」だとしたら、次のコマンドでアイコンセットをインストールする。

# npm install -D @iconify-json/abc

tailwind.config.js の編集

下記内容のように編集する。

const { addDynamicIconSelectors } = require('@iconify/tailwind');

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/*.tsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    // daisyUI
    require("daisyui"),
    // Iconify
    addDynamicIconSelectors(),
  ],
}

src/App.tsx の編集

下記内容のように編集する。

function App() {
    return (
        <>
            <h1 className="bg-red-500">あいうえお</h1>
            <button className="btn btn-primary">primary</button><br/>
            <span className="icon-[material-symbols--add-circle]"></span><br/>
        </>
    )
}

export default App

iconify の動作確認

開発用サーバを起動し、Webブラウザでアクセスして、
daisyUIのボタンの下にプラスが丸で囲まれたアイコンが表示されれば良い。