Tailwind CSS v4.2.0の論理プロパティ移行に対応

2026年02月21日 06:27 JST activeadmin/activeadmin

https://github.com/activeadmin/activeadmin/pull/8946

ActiveAdminのメインナビゲーションで使用していた start-0 ユーティリティを、Tailwind CSS v4.2.0で推奨される inset-s-0 に置き換えました。この変更により、Tailwind CSSの論理プロパティへの移行方針に準拠しつつ、国際化対応の基盤が整備されます。

背景

Tailwind CSS v4.2.0では、物理的な方向指定を行う start-* と end-* ユーティリティが非推奨となりました。tailwindlabs/tailwindcss#19613 で、これらに代わる論理プロパティベースの新しいユーティリティが導入されています。

論理プロパティは、CSSの inset-inline-start や inset-inline-end などのプロパティを指し、書字方向（LTRやRTL）に応じて自動的に適切な配置を実現します。start-* は物理的な「左」を意味していましたが、inset-s-* は論理的な「インライン方向の開始位置」を表現するため、アラビア語やヘブライ語などのRTL言語でも正しく機能します。

ActiveAdminでは、メインナビゲーションの配置に start-0 を1箇所使用していたため、この非推奨化に対応する必要がありました。

技術的な変更

app/views/active_admin/_main_navigation.html.erb で、メインメニューの位置指定を論理プロパティベースのユーティリティに変更しました。

変更前:

<div id="main-menu" class="fixed top-0 xl:top-16 bottom-0 start-0 z-40 w-72 xl:w-60 p-4 overflow-y-auto transition-transform duration-200 -translate-x-full xl:translate-x-0 bg-white dark:bg-gray-950 xl:border-e xl:border-gray-200 xl:dark:border-white/10" tabindex="-1">

変更後:

<div id="main-menu" class="fixed top-0 xl:top-16 bottom-0 inset-s-0 z-40 w-72 xl:w-60 p-4 overflow-y-auto transition-transform duration-200 -translate-x-full xl:translate-x-0 bg-white dark:bg-gray-950 xl:border-e xl:border-gray-200 xl:dark:border-white/10" tabindex="-1">

start-0 が inset-s-0 に置き換えられ、CSSレベルでは inset-inline-start: 0 にマッピングされます。PR本文で言及されているように、Flowbiteは依然として left-0 を追加しますが、これはFlowbite側の実装であり、Tailwindユーティリティ自体は論理プロパティを使用するようになりました。

加えて、spec/support/templates/views/admin/posts/_starred_batch_action_form.html.erb でも、モーダルの配置に使用していた物理プロパティベースのユーティリティを論理プロパティに移行しています。top-3 と end-2.5 が inset-bs-3 と inset-e-2.5 に変更され、left-0、right-0、top-0 を含む複合指定も inset-bs-0、inset-s-0、inset-e-0 に分解されました。

Tailwind CSSのバージョンは package.json で v4.1.18 から v4.2.0 に更新されています。

設計判断

本PRでは、非推奨ユーティリティを新しい論理プロパティベースのユーティリティに機械的に置き換える方針 が採られました。

Tailwind CSS側の tailwindlabs/tailwindcss#19613 では、inset-s（inline-start）、inset-e（inline-end）、inset-bs（block-start）、inset-be（block-end）という4つの新しいユーティリティが導入されています。これらは既存の inset-x（inline）と inset-y（block）を補完し、より細かい制御を可能にします。

ActiveAdminでは、これらの新しいユーティリティを使用することで、将来的にRTL言語のサポートが必要になった場合でも、CSSの書き換えなしに対応できる基盤が整いました。ただし、PR本文で指摘されているように、Flowbiteなどのサードパーティライブラリが物理プロパティを使用している場合は、それらの更新を待つ必要があります。

まとめ

本PRは、Tailwind CSS v4.2.0の非推奨化対応として、物理プロパティベースのユーティリティを論理プロパティベースのものに置き換えた変更です。ActiveAdminのコードベースは1箇所の修正で対応が完了しており、国際化対応の基盤を整えつつ、Tailwind CSSのエコシステムとの整合性を維持しています。