🐈

webpackというものを触ってみる - tailwindcssを使える様にする

2022/10/18に公開

CSS

はじめに

前回からの続きです。

自分で記述したcssを含める事ができたので、次はCSSフレームワークのtailwindcssを含めたいと思います。

環境

windows10 (wsl2)
node(v16.18.0)
yarn(1.22.19)

ディレクトリ構成やファイルの内容は前回の最後から引き続きです。

tailwindcssをインストール

まずは必要なツールをインストールします。

# インストール
$ yarn add -D tailwindcss postcss postcss-loader autoprefixer

# tailwindcssの初期化
$ yarn tailwindcss init -p

この結果、 ./tailwind.config.js と ./postcss.config.js とが追加されていると思います。
オプションの -p をつけない場合 ./postcss.config.js が作成されないので、次の項の内容で作成する必要があります。

設定ファイルの編集

./postcss.config.js は変更不要です。

./postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

次に ./tailwind.config.js を編集します。

./tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: ["./dist/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

最後に ./webpack.config.js を編集します。

webpack.config.js

tailwindcssのCSSを読み込む

前回作成した ./src/style/main.css を編集し、tailwindcssを読み込む様にします。

./src/style/main.css

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

body {
    background-color: #ddd;
    color: #000;
}

表示ページ編集

tailwindcssが機能しているか確認する為、 ./dist/index.html にtailwindcssのclassを記述します。

./dist/index.html

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script src="./main.js"></script>
</head>

<body>
-   <h1>webpackというものを触ってみる。</h1>
+   <h1 class="text-3xl font-bold underline">webpackというものを触ってみる。</h1>
    <hr>
    <button id="btn-alert">show alert</button>
    <input type="text" name="message" id="message">
</body>

</html>

コンパイル

コンパイルすると ./dist/main.js の中に tailwindcss のCSSが含まれます。
この時、 ./tailwind.config.js の content で指定したファイルで利用されていない不要なCSSは省かれます。その為、 content の指定が誤っていると正しくCSSが含まれません。

daisyUIのインストール

tailwindcssをインストールしましたが、これを利用したdaisyUIというFWがあり、こちらの方が使いやすそうなので適用してみます。

# daisyUIをインストール
$ yarn add -D daisyui

インストールされたら ./tailwind.config.js を編集します。

./tailwind.config.js

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

daisyUIが適用されている事を確認する為、 ./dist/index.html を編集します。

./dist/index.html

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script src="./main.js"></script>
</head>

<body>
    <h1 class="text-3xl font-bold underline">webpackというものを触ってみる。</h1>
    <hr>
    <button id="btn-alert">show alert</button>
    <input type="text" name="message" id="message">
+   <button class="btn">hoge</button>
</body>

</html>

ページを表示してマテリアルデザインっぽいボタンが表示されていれば適用されています。

この時点でのディレクトリ構成等

$ tree -I node_modules
.
├── dist
│   ├── index.html
│   ├── main.js
│   ├── main.js.LICENSE.txt
│   └── main.js.map
├── package.json
├── postcss.config.js
├── src
│   ├── index.js
│   ├── js
│   │   ├── minus.js
│   │   └── sum.js
│   └── style
│       └── main.css
├── tailwind.config.js
├── webpack.config.js
└── yarn.lock

./package.json

{
  "name": "20221014_webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.4",
    "autoprefixer": "^10.4.12",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "daisyui": "^2.31.0",
    "postcss": "^8.4.18",
    "postcss-loader": "^7.0.1",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.1.8",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "jquery": "^3.6.1"
  }
}