【daisyUI】Tailwind CSSからインストールしReactに導入する方法（webpack）
まえがき
daisyUI公式は、Tailwind CSSを導入済みのものとしてインストール方法が解説されています。
You need Node.js and Tailwind CSS installed.
- Install daisyUI:
「うっ... Tailwind CSSから教えて欲しい...！」と思い、この記事にたどり着いたのではないでしょうか？
今回はReactを扱ったことがあるものの、UIフレームワークとしてTailwind CSSを選定したことのない方へ向けてインストール方法を解説していきます。
手順
1. Node.js（npm）が導入されているか確認
node -v
vX.X.Xのような実行結果が反映されれば既にインストール済みです。
npm -v
X.X.Xのような実行結果が反映されれば既にインストール済みです。
2. package.jsonを作成
以下のコマンドで初期化処理を行います。
npm init
今回は詳細な設定は不要です。何も入力せずEnterキーを押し続けましょう。
package.jsonが作成されます。
3. Reactのインストール
npm i react react-dom
コマンドの詳細
-
npm i:npm installのこと。node_modulesディレクトリが作成され、インストールされたパッケージはpackage.jsonのdependenciesに記載されます。
4. webpack関連パッケージのインストール
開発環境に限定してインストールします。
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader
コマンドの詳細
-
npm i -D:npm install --save-devのこと。node_modulesにインストールされたパッケージはpackage.jsonのdevDependenciesに記載され、開発環境のみでの使用が可能となります。
5. Tailwind CSSとdaisyUIのインストール
開発環境に限定してインストールします。
npm i -D tailwindcss@ daisyui@latest autoprefixer postcss postcss-loader
6. webpackを設定
プロジェクトディレクトリにwebpack.config.jsを作成します。
touch webpack.config.js
or
ni webpack.config.js
webpack.config.jsに以下のコードを記述します。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
main: __dirname + '/src/main.jsx',
},
output: {
path: __dirname + '/dist',
filename: '[name].js',
},
module: {
rules: [
{
test: [/\.js$/, /\.jsx$/],
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
}, ],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
],
},
resolve: {
modules: [__dirname + '/node_modules'],
extensions: ['.js', '.jsx'],
},
plugins: [new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
}), ],
devServer: {
static: {
directory: __dirname + '/dist',
},
port: 8080,
},
};
7. tailwindcss.config.jsとpostcss.config.jsの作成
以下のコマンドでTailwind CSSの初期化処理を行います。
npx tailwindcss init
tailwindcss.config.jsとpostcss.config.jsが作成されます。
コマンドの詳細
-
npx tailwindcss init:npm initはパッケージマネージャーであるnpm自体の初期化でしたが、今回は特定のファイルのみの操作となるためnpxコマンドを用います。
8. Tailwind CSSとdaisyUIの設定
Tailwind CSSの反映させたいファイルを指定、そしてプラグインにdaisyUIを呼び出します。
tailwindcss.config.jsを以下のように修正します。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx}",
],
theme: {
extend: {},
},
plugins: [require('daisyui')],
}
CSSファイルに以下の内容を記述します。
@tailwind base;
@tailwind components;
@tailwind utilities;
また、今回のディレクトリ構成であればApp.jsxにCSSファイルを呼び出すのを忘れないようにしてください。
import React from "react";
import './css/reset.css';
import './css/style.css';
const App = () => {
//...
9. 開発サーバーの起動準備
scriptsプロパティにstart・devプロパティを追加します。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npx webpack --config webpack.config.js",
"dev": "npx webpack serve --config webpack.config.js"
},
以下のようなディレクトリ構成になっているか確認します。
frontend
├── node_modules/
├── src/
│ ├── css/
│ │ ├── reset.css
│ │ └── style.css
│ ├── App.jsx
│ ├── index.html
│ └── main.jsx
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwindcss.config.js
└── webpack.config.js
準備完了！
daisyUIが有効になっているか確認するためApp.jsxにボタンを作成します。
import React from "react";
import './css/reset.css';
import './css/style.css';
const App = () => {
return (
<>
<button className="btn btn-primary">Button</button>
</>
);
};
export default App;
以下のコマンドで開発サーバーを起動します。
npm run dev
daisyUIのボタンが反映されていたらこれで完成です！
総括
これでdaisyUIの環境構築は万全です。daisyUIはStatやProgressなど数値を示すデザインをリッチに実現することに強みを持っています。
ぜひ、使ったことのあるCSSフレームワークだけではなく、実現したいUIに合わせて選定していきましょう！
Discussion