⚛️

【daisyUI】Tailwind CSSからインストールしReactに導入する方法(webpack)

2023/10/26に公開

まえがき

daisyUI公式は、Tailwind CSSを導入済みのものとしてインストール方法が解説されています。

You need Node.js and Tailwind CSS installed.

  1. Install daisyUI:

「うっ... Tailwind CSSから教えて欲しい...!」と思い、この記事にたどり着いたのではないでしょうか?
今回はReactを扱ったことがあるものの、UIフレームワークとしてTailwind CSSを選定したことのない方へ向けてインストール方法を解説していきます。

手順

1. Node.js(npm)が導入されているか確認

Terminal
node -v

vX.X.Xのような実行結果が反映されれば既にインストール済みです。

Terminal
npm -v

X.X.Xのような実行結果が反映されれば既にインストール済みです。

2. package.jsonを作成

以下のコマンドで初期化処理を行います。

Terminal
npm init

今回は詳細な設定は不要です。何も入力せずEnterキーを押し続けましょう。
package.jsonが作成されます。

3. Reactのインストール

Terminal
npm i react react-dom
コマンドの詳細
  • npm i: npm installのこと。node_modulesディレクトリが作成され、インストールされたパッケージはpackage.jsondependenciesに記載されます。

4. webpack関連パッケージのインストール

開発環境に限定してインストールします。

Terminal
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.jsondevDependenciesに記載され、開発環境のみでの使用が可能となります。

5. Tailwind CSSとdaisyUIのインストール

開発環境に限定してインストールします。

Terminal
npm i -D tailwindcss@ daisyui@latest autoprefixer postcss postcss-loader

6. webpackを設定

プロジェクトディレクトリにwebpack.config.jsを作成します。

Terminal (mac OS)
touch webpack.config.js

or

Terminal (windows OS)
ni webpack.config.js

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の作成

以下のコマンドでTailwind CSSの初期化処理を行います。

Terminal
npx tailwindcss init

tailwindcss.config.jsが作成されます。

コマンドの詳細
  • npx tailwindcss init: npm initはパッケージマネージャーであるnpm自体の初期化でしたが、今回は特定のファイルのみの操作となるためnpxコマンドを用います。

8. postcss.config.jsの作成・記述

プロジェクトディレクトリにpostcss.config.jsを作成します。

Terminal (mac OS)
touch postcss.config.js

or

Terminal (windows OS)
ni postcss.config.js

postcss.config.jsに以下のコードを記述します。

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

9. Tailwind CSSとdaisyUIの設定

Tailwind CSSの反映させたいファイルを指定、そしてプラグインにdaisyUIを呼び出します。
tailwindcss.config.jsを以下のように修正します。

tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
}

CSSファイルに以下の内容を記述します。

style.css
@tailwind base";
@tailwind components";
@tailwind utilities";
@tailwind に警告がある場合

Tailwind CSSを導入すると「Unknown at rule @tailwind」という警告を受ける場合があります。解消法は以下をご覧ください。

https://qiita.com/yamap-web/items/9d6f75e788ce43c51007

また、今回のディレクトリ構成であればApp.jsxにCSSファイルを呼び出すのを忘れないようにしてください。

App.jsx
import React from "react";

import './css/reset.css';
import './css/style.css';

const App = () => {
//...

10. 開発サーバーの起動準備

scriptsプロパティにstartdevプロパティを追加します。

package.json
"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にボタンを作成します。

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;

以下のコマンドで開発サーバーを起動します。

Terminal
npm run dev

daisyUIのボタンが反映されていたらこれで完成です!

総括

これでdaisyUIの環境構築は万全です。daisyUIはStatやProgressなど数値を示すデザインをリッチに実現することに強みを持っています。
ぜひ、使ったことのあるCSSフレームワークだけではなく、実現したいUIに合わせて選定していきましょう!

参考文献

Discussion