Coldfusion配下にWebpack＋Tailwindを導入する方法

ColdFusionでWebpackを使用してTailwind CSSを導入する手順

1. プロジェクトのセットアップ

新しいディレクトリを作成し、その中でnpmの初期化を行います。
フォルダ名は任意のものを設定してください。

mkdir cf-project
cd cf-project
npm init -y

ディレクトリ構造

サンプルですがこういう形でフォルダを切るのが良いかと思います。

cf-project/
|-- src/
| |-- css/
| | |-- styles.css
| |-- js/
| | |-- index.js
|-- dist/
|-- package.json
|-- webpack.config.js

2. 必要なパッケージのインストール

Webpack、Tailwind CSS、および関連するローダーやプラグインをインストールします。

npm install webpack webpack-cli tailwindcss postcss postcss-loader mini-css-extract-plugin css-loader css-minimizer-webpack-plugin --save-dev

3. Tailwindの設定

Tailwind CSSの設定ファイルを生成します。

npx tailwindcss init

4. PostCSSの設定

postcss.config.jsファイルをプロジェクトのルートに作成し、以下の内容を追加します。

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

5. Webpackの設定

webpack.config.jsファイルを作成し、以下の内容を追加します。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
  ],
  optimization: {
		minimizer: [new CssMinimizerPlugin()],
	},
};

6. ソースファイルの作成

• src/css/styles.cssに以下のTailwindのユーティリティを追加します。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

• src/js/index.jsに以下の内容を追加して、CSSをインポートします。

import '../css/styles.css';

7. ビルドスクリプトの追加

package.jsonに以下のscriptsセクションを追加します。

"scripts": {
  "build": "webpack --mode production"
}

8. ビルドの実行

以下のコマンドを実行して、Webpackを使用してTailwind CSSをコンパイルします。

npm run build

dist/ディレクトリにbundle.jsとstyles.cssがコンパイルして生成されるので、
そのstyles.cssをColdFusionのテンプレートやレイアウトにリンクタグで設定して使用します。