この記事は、 Antonio Zapater氏によるblog記事「Tailwind CSS and RAD Studio: A Simple Approach Without Node.js」の抄訳です。

WebStencils に関する 以前の投稿 をご覧いただいている方には、私たちが最新の Web 開発をより簡単にすることに注力していることをご存知かと思います。今回は、私たちの取り組みについてご紹介します。それは、実用的な方法で、かつ面倒な手続きなく、Delphi プロジェクトに Tailwind CSS を統合することです。

主なアイデア

Tailwind CSS のような最新の CSS フレームワークの課題は、通常 Node.js とビルドツールチェーンが必要になることです。しかし、Tailwind のスタンドアロン CLI バイナリを代わりに使用できたらどうなるでしょうか？また、npm や package.json に一切手を加えることなく、開発を高速化（CDN を使用）し、本番環境を最適化（生成された CSS ファイルを使用）するワークフローを構築できたらどうでしょうか？

まさにそれを実現しました。WebStencils と WebBroker を使って Tailwind CSS を Delphi に統合する方法を示すデモプロジェクトを作成しました。このプロジェクトでは、ビルド設定に基づいて CDN とローカル CSS を切り替えるハイブリッドなアプローチを採用しています。一番の利点は、Delphi のビルド後イベントによってすべて自動化されているため、ユーザーが何も考える必要がないことです。

Tailwind CSS とは？

使い方に入る前に、Tailwind CSS とは何か、そしてなぜそのように動作するのかを簡単に説明しましょう。

Tailwind CSS はユーティリティファーストの CSS フレームワークです。カスタム CSS を記述したり、あらかじめ用意されたコンポーネントを使用したりするのではなく、HTML に直接小さなユーティリティクラスを適用することで UI を構成します。例えば、次のように記述する代わりに、

.my-button {
  background-color: blue;
  padding: 10px 20px;
  border-radius: 5px;
}

次のように記述します:

<button class="bg-blue-500 px-5 py-2 rounded-lg">Click me</button>

このアプローチは迅速な開発には最適ですが、落とし穴があります。Tailwind は数千ものユーティリティクラスを生成するため、すべてを組み込むと CSS ファイルのサイズが巨大化します（3～4MB 程度）。そのため、Tailwind CSS を使用するプロジェクトでは、HTML で使用されるクラスのみを組み込むように「ビルド」する必要があります。

ところで、Tailwind CSS には賛否両論あることを付け加えておきます。カスタム CSS を記述することなくデザインのあらゆる側面を微調整できるため、きめ細かな制御ができる点を高く評価する開発者もいます。一方で、大量のユーティリティクラスによって HTML が乱雑になり読みにくくなると感じる開発者もいます。私はどちらか一方を擁護するつもりはありません。この投稿のポイントは、Tailwind を Delphi で使用したい場合、それが可能であり、複雑でないことを示すことです。

実はこれがWebStencilsの好きな点の一つです。CSSとJavaScriptに全く依存しないのです。特定のフレームワークやアプローチに縛られることはありません。Tailwindを使いたいですか？どうぞ。Bootstrapがお好みですか？それも使えます。カスタムCSSを書きたいですか？全く問題ありません。WebStencilsはテンプレートをレンダリングするだけで、そこに何を入れるかは完全にあなた次第です。

ビルドプロセス

Tailwind は、HTML テンプレートをスキャンし、実際に使用されているクラスを検出し、それらのクラスのみを含む CSS ファイルを生成するビルドプロセスを使用します。このプロセス（「content scanning」または「Tree shaking」と呼ばれることもあります）により、3～4 MB の CSS ファイルではなく、必要なスタイルのみを含む 5～50 KB 程度のファイルが生成されます。

この従来のビルドプロセスには以下が必要です。

• Node.js がマシンにインストールされていること
• npm (Node Package Manager)
• Vite や Webpack などのビルドツール
• 依存関係を記述した package.json ファイル
• npm install と npm run build の実行コマンド

Webアプリのスタイル設定だけを行いたいDelphi開発者にとって、これは大きなオーバーヘッドとなります。実質的には、CSSを生成するためだけにJavaScript開発環境を構築するようなものです。

RAD 方式：Node.js は不要

ここからが面白いところです。Tailwind CSS は、Node.js をまったく必要としないスタンドアロンの CLI バイナリを提供しています。これは、Node.js バージョンと同じ機能をすべて実行できる単一の実行ファイルで、npm エコシステムを必要とせずに動作します。

これにより、ワークフローが大幅に簡素化されます。

1. スタンドアロン CLI をダウンロード – GitHub リリース から最新の tailwindcss-windows-x64.exe をダウンロードします。
2. ビルド後のイベントを設定 – リリースモードでビルドした後に CLI を実行するように Delphi に指示します（詳細は後述）。
3. これで完了です – CSS は自動的に生成されます

しかし、それだけではありません。開発段階では、ビルドプロセスを実行する必要すらありません。すべてのクラスが含まれるTailwindのCDNを使用できます。これは次のことを意味します。

• デバッグビルド: CDN を使用し、ビルドステップは不要で、すべての Tailwind クラスが利用可能になり、即座に変更が適用されます。
• リリースビルド: ビルド後のイベントによって、使用したクラスのみを使用して最適化された CSS ファイルが自動的に生成されます。

アプリケーション自体が現在のモードを検出し、適切な CSS ソースを読み込みます。

仕組み

魔法は baseLayout.html テンプレートで起こります。WebStencils の条件構文を使って、デバッグモードかどうかを確認します。

@if (env.debug) {
  <script src="https://cdn.jsdelivr.net/npm/@@tailwindcss/browser@@4"></script>
} @else {
  <link rel="stylesheet" href="/static/css/output.css">
}

env.debug 変数は、{$IFDEF DEBUG} に基づいて Delphi コードで設定されるため、テンプレートはどの CSS をロードするかを自動的に認識します。

リリース モードでビルドすると、Delphi のビルド後のイベントが実行されます。

tools¥tailwindcss.exe -i src¥input.css -o templates¥static¥css¥output.css --minify --content "templates¥**¥*.html"

このコマンドは:

• src/input.css を入力として受け取ります
• templates/ ディレクトリ内のすべての HTML ファイルをスキャンします
• 使用しているクラスのみを含む、最適化され縮小された CSS ファイルを生成します
• templates/static/css/output.css に出力します

2 つの小さなファイルがこれを機能させます。src/input.css は Tailwind (@import "tailwindcss";) をインポートするだけなので、CLI は何を生成するかを認識し、tools/tailwind.config.js はクラスを探す場所 (この場合は templates/**/*.html) を Tailwind に指示します。 Delphi で生成できる動的クラスをセーフリストに登録することもできます。通常、これらを頻繁に扱うことはありませんが、必要に応じてプロジェクトごとにカスタマイズできます。Tailwind のドキュメントではオプションについて詳しく説明しています。

試してみる

実際に動作を確認したい場合は、GitHub のデモプロジェクトをご覧ください。README にセットアップ手順がすべて記載されています。必要なのは、Tailwind CLI バイナリ(tailwindcss-windows-x64.exe)をダウンロードし、名前を tailwindcss.exe に変更して tools/ ディレクトリに配置するだけです。あとはすべて設定済みです。

このプロジェクトは、JavaScript 開発者にならなくても、Delphi が最新の CSS フレームワークと連携できることを示しています。時には、最もシンプルな方法こそが最善の解決策となることもあり、今回の場合は、スタンドアロン CLI を使用し、残りの処理は Delphi のビルドシステムに任せるということになります。

ご意見をお聞かせください。Delphi で最新の CSS フレームワークを使ってみた経験はありますか？ ぜひ、ご経験や、他に試したアプローチなどをお聞かせください。