つい先日ですが、Google Chrome 開発者向け Blog で、いくつかの CSS プロパティへの対応状況が紹介されました （下記記事参考）。
その中で、text-autospace プロパティについても、まだ、Experimental Web Platform features （実験的な Web プラットフォーム機能 / chrome://flags/#enable-experimental-web-platform-features の設定が必要） ながら、最新の Chrome 120 でサポートされたとのこと。
そこで、Tailwind CSS でも、一足先にこのプロパティを簡単に利用できるよう、プラグインとして公開してみました。
将来、本格的に各ブラウザのサポートが広まれば、恐らく Tailwind CSS 側で正式なユーティリティクラスとして実装される日が来る気もしますが、今のところは気にしない。
プラグインは npm で公開しましたので、
npm install -D tailwindcss-text-autospace
した上で、tailwind.config.js に下記のようにプラグインを読み込む設定をしてもらえれば使用可能になります。
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-text-autospace'),
// ...
],
};
プラグインの導入で使用できるようになるカスタムユーティリティクラスなどについては GitHub の README.md にまとめていますのでご確認ください。
ちなみに、昔から Web サイトの制作やってるとか、CSS に興味がある人であれば、text-autospace プロパティって前からなかったっけ？ と思う懐かしプロパティだと思いますが （IE5 とか言ってる時代･･････）、今回話題にしている text-autospace プロパティは、CSS Text Module Level 4 で現在策定が行われている方になります。
CSS Text Module Level 4 は現時点で Editor's Draft （編集者草案） ですし、これは、W3C の仕様策定プロセスにおいてはまだ非公式、非承認のドキュメントですから、今後仕様が変更されたりする可能性もあってあまり積極的に使っていくものではないのですが、個人的には早くサポートされてほしかったプロパティなのでフライングしてみました。
