[tailwindcss]tailwindcssをwebpackでバンドルする

概要

cssのフレームワークでtailwindcssが波に乗っているようなのでwebpackでバンドルする方法をハマった方法とともに記述する。

方法

node packageのインストール

npm install --save-dev optimize-css-assets-webpack-plugin webpack speed-measure-webpack-plugin

npm install --save tailwindcss@latest postcss@latest autoprefixer@latest

npm install --save-dev \
webpack webpack-cli webpack-dev-server  \
postcss tailwindcss \
postcss-loader css-loader style-loader \

tailwindcssの設定方法

webpackでentryに使用するjsfile

import "tailwindcss/tailwind.css"

構成fileの作成

terminal

# このコマンドでtailwind.config.ymlが作成される
npx tailwindcss init

# 追加でwebpackでバンドルできるようにpostcss.config.jsを作成する
touch postcss.config.js

postcss.config.jsの設定

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
}

webpackの設定

webpack.config.yml

const path = require("path")
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
　　　　# ↓ここからcssに対してこの設定にしないとerrorになる
      {
        test: /\.css$/,
        use: [
          "style-loader",
          { loader: "css-loader", options: { importLoaders: 1 } },
          "postcss-loader",
　　　　　#↑ここまで
        ],
      },
    ],
  },
  // Optional for webpack-dev-server
  devServer: {
    watchContentBase: true,
    contentBase: path.resolve(__dirname, "dist"),
    open: true,
  },
}

これでtailwindcssが使えるようになる

　参考文献

公式

Tailwind CSS Webpack Starter Project

How to setup TailwindCSS with PostCSS and Webpack