Oxfmt / Oxlint で TailwindCSS を整形する
先月（2026年1月）、Oxfmt で TailwindCSS が Experimental でサポートされました。
これにより、TailwindCSS のリント・フォーマットを Oxlint か Oxfmt のどちらで行うかを選択できるようになったのでそれぞれの設定について紹介します。
ここで出てくるコードは以下のRepositoryにあります。
Oxfmt
まずは Oxfmt で TailwindCSS を整形するパターンです。
設定ファイル
Oxfmt の experimentalTailwindcss を設定することでルールが有効になります。
以下は設定ファイルの例です。
{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"experimentalTailwindcss": {
"stylesheet": "./src/index.css",
"preserveDuplicates": true,
"preserveWhitespace": true
}
}
内部では prettier-plugin-tailwindcss を使用しており、class 名のソート、重複 class 名の削除、余分な空白の削除を行うことができます。
実行速度について
最初に紹介した Repository で experimentalTailwindcss を有効にする前と後の実行速度は以下のとおりです（スペック：MacBook Pro Apple M1 Max 64GB）。
| 実行時間 | |
|---|---|
| before | 106ms |
| after | 312ms |
内部で prettier-plugin-tailwindcss を実行しているため、速度の低下はありますが、ファイルから class 名を抜き出す処理を Rust で行うなどしてパフォーマンスの劣化を抑えているようです。以下は実装時の PR です。
Oxlint × eslint-plugin-better-tailwindcss
次は Oxlint を使用したパターンです。
設定ファイル
Oxlint では jsPlugins を利用することで既存の ESLint プラグインを使用することができます。これを利用して、eslint-plugin-better-tailwindcss を使用することで TailwindCSS のリント・フォーマットを行うことができます。
以下は設定ファイルの例です。
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"jsPlugins": ["eslint-plugin-better-tailwindcss"],
"rules": {
"better-tailwindcss/enforce-consistent-line-wrapping": "error",
"better-tailwindcss/enforce-consistent-class-order": "error",
"better-tailwindcss/enforce-consistent-variable-syntax": "error",
"better-tailwindcss/enforce-consistent-important-position": "error",
"better-tailwindcss/enforce-shorthand-classes": "error",
"better-tailwindcss/enforce-canonical-classes": "error",
"better-tailwindcss/no-duplicate-classes": "error",
"better-tailwindcss/no-deprecated-classes": "error",
"better-tailwindcss/no-unnecessary-whitespace": "error",
"better-tailwindcss/no-unknown-classes": "error",
"better-tailwindcss/no-conflicting-classes": "error",
"better-tailwindcss/no-restricted-classes": "error"
},
"settings": {
"better-tailwindcss": {
"entryPoint": "src/index.css"
}
}
}
注意点として、現時点(2026年2月1日)では jsPlugins で recommended などのルールを一括で有効にすることができないため、手動でルールを有効にしていく必要があります。
また、VS Codeなどのエディター上では jsPlugins のルールは実行されません。現在対応が進んでおり、以下のissueを見る限りではテスト段階に入っているように見えます。
Oxfmt ではコード保存時に class 名のソートなどが実行されるため、prettier-plugin-tailwindcss のルールのみで事足りるなら、現時点では Oxfmt を使用するのが良いのかもしれません。
実行速度について
最初に紹介した Repository で jsPlugins を有効にする前と後の実行速度は以下のとおりです。
| 実行時間 | |
|---|---|
| before | 106ms |
| after | 2.5s |
この結果だけを見ると jsPlugins を使うとめちゃめちゃ遅くなると思うかもしれませんが、そうではありません。そもそも eslint-plugin-better-tailwindcss にはめちゃめちゃ遅いルールが一つあり、それのせいで遅くなっています。
以下は ESLint で eslint-plugin-better-tailwindcss を実行した際の各ルールの実行時間です。 better-tailwindcss/enforce-canonical-classes というルールだけで約2秒かかっていることがわかります。
このルールをオフにすることで Oxlint の実行時間は 412ms まで下がるため、jsPlugins を使用することによるオーバーヘッドはほとんどないと考えられます。
まとめない
Oxfmt と Oxlint のどちらでも TailwindCSS を整形することができるようになりましたが、どちらが主流になるのでしょうかね。内部では元々ある Prettier/ESLint プラグインを使っているので、そもそも既存で使ってる方を選択するとは思いますが、個人的にはルールの多い eslint-plugin-better-tailwindcss の方が良いのかなと思ったりします（no-unknown-classes とか便利なので）。
また、今回 Oxfmt に TailwindCSS のサポートが入ったので Oxlint に TailwindCSS のリントルールが入ることはないのかな？と思ったりもしてます。そうなると no-unknown-classes などのルールは jsPlugins 経由で使うしかなくなるなーと思っており、そういう議論は Oxfmt/Oxlint 内で出てたのかな、と思っています。
Discussion