🌐

Webpack + Tailwind CSS の開発環境を構築

2 min read

完成形のプロジェクト

https://github.com/asano-yuki/webpack-tailwindcss

1. package.json

今回はmini-css-extract-pluginを使ってcssファイルを出力する。
後で設定するPurgeCSSを有効にするために、本番ビルドにのみNODE_ENV=productionを指定する。

package.json
"scripts": {
    "dev": "NODE_ENV=development webpack --mode development",
    "build": "NODE_ENV=production webpack --mode production",
    "server": "NODE_ENV=development webpack serve --mode development"
},
"devDependencies": {
    "autoprefixer": "^10.3.1",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.2.0",
    "postcss-loader": "^6.1.1",
    "tailwindcss": "^2.2.7",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
}

2. webpack.config.js

ポイントはpostcss-loaderのオプションとしてtailwindcssを設定する。

webpack.config.js
const path = require('path')
const TailwindCss = require('tailwindcss')
const Autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = (env, args) => {
  const { mode } = args
  const sourceMap = mode === 'development'
  
  return {
    entry: './src/index.js',
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'index.js'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                sourceMap
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                    TailwindCss,
                    Autoprefixer
                  ]
                }
              }
            }
          ]
        }
      ]
    },
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      port: 3000,
      open: true
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'style.css'
      }),
      new HtmlWebpackPlugin({
        template: path.join(__dirname, 'src', 'index.html')
      })
    ]
  }
}

3. tailwind.config.js

PurgeCSSの設定ファイル。
今回はビルド時に未使用なTailwindcssのプロパティを削除するための用途だけに使用する。
productiondevelopmentに関係なくパージを有効にしたい場合はenabled: trueを有効にする。

tailwind.config.js
module.exports = {
  purge: {
    // enabled: true,
    content: ['puglic/**']
  }
}

Discussion

ログインするとコメントできます