目的
下記パッケージをインストールし、動作確認を行う。
前提
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
アイコンセットの補足
アイコンセットを確認するには次のサイトで好みのアイコンを含むアイコンセットを確認する。
https://icon-sets.iconify.design
次のGitHubページで、指定したいアイコンセットのprefixの値を確認する。
https://github.com/iconify/icon-sets/tree/master/json
確認した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のボタンの下にプラスが丸で囲まれたアイコンが表示されれば良い。