スタンドアロンCLI：Node.jsなしでTailwind CSSを使う

Tailwind CSSはJavaScriptで記述されており、npmパッケージとして配布されています。つまり、これを使用するには常にNode.jsとnpmをインストールする必要がありました。

これにより、npmの使用が一般的ではないプロジェクトに統合することが難しくなりました。RailsやPhoenixのようなツールがデフォルトでnpmから離れる傾向にあるため、これらのプロジェクトでTailwindを使用する際に、完全に別のツールエコシステムを採用させることなく使用できる方法を見つける必要がありました。

本日、Node.jsやnpmを必要とせずに、自己完結型の実行可能ファイルでTailwind CLIの全機能を提供する、新しいスタンドアロンCLIビルドを発表します。

はじめに

インストールするには、GitHubの最新リリースからプラットフォーム用の実行可能ファイルを入手し、実行可能権限を付与してください。

# Example for macOS arm64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

これで、npmで配布されているCLIツールと同じように使用できます。

# Create a tailwind.config.js file
./tailwindcss init
# Start a watcher
./tailwindcss -i input.css -o output.css --watch
# Compile and minify your CSS for production
./tailwindcss -i input.css -o output.css --minify

さらに、すべてのファーストパーティ製プラグインの最新バージョンをバンドルしました。そのため、プロジェクトで使用したい場合は、Nodeベースのプロジェクトと同様に、tailwind.config.jsファイルでrequireするだけで使用できます。

module.exports = {
  // ...
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
};

標準のnpm配布CLIのすべての機能を、便利なポータブルパッケージで利用できます — 依存関係は不要です。

どのように動作するのですか？

TailwindをRustなどで書き直したわけではありません（まだ…）。実際には、Vercelによる非常にクールなプロジェクトであるpkgを使用しています。これにより、Node.jsプロジェクトを実行可能ファイルに変換し、プロジェクトに必要なすべての部分を実行可能ファイル自体にバンドルすることで、Node.jsをインストールせずに実行できます。

これにより、JSONのような静的な形式ではなく、JavaScriptの全機能を備えたtailwind.config.jsファイルを引き続き使用できるようになります。

どのCLIを使用すべきですか？

プロジェクトでnpmをすでに使用している場合は、これまで提供してきたnpm配布バージョンのCLIを使用してください。更新が簡単で、ファイルサイズが小さく、すでにエコシステム内にいるため、スタンドアロンビルドを使用するメリットはまったくありません。

一方、Node.jsやnpmが他に必要ないプロジェクトで作業している場合は、スタンドアロンビルドは素晴らしい選択肢になります。Tailwindがpackage.jsonファイルを持つ唯一の理由だった場合、これはより良い解決策に感じるでしょう。