🔨
Tailwind CSSで数字の幅を揃える
Tailwind CSS では、独自のリセット CSS の Preflight の影響で数字の幅が揃わないという現象が発生することがあります。
今回は、その一例と解決方法を紹介します。
例えばこのようなもの
上記のように、1 と 0 の幅が異なるため、これを揃えます。
解決策
Tailwind CSS で用意されている tabular-nums というクラスを用います。
なお、このクラスのプロパティは、
--tw-numeric-spacing: tabular-nums;
です。
そのため、ページ全体対して適用したい場合は、個別に設定するのではなく、 tabular-nums クラスを html タグや body タグに設定することもできます。
その場合のコードは、下記のようなものです。
<html lang="ja" class="tabular-nums"></html>
<!-- または -->
<body class="tabular-nums"></body>
なお、Tailwind CSS の公式ドキュメントには、このクラスのプロパティは、
font-variant-numeric: tabular-nums;
であると書かれています。
しかし、実際のプロパティとは異なっているため、この記述はおそらく「font-variant-numeric: tabular-nums;と同様のはたらきをするクラスである」という意味合いなのでしょう。
font-variant-numeric についての詳細は、MDN | font-variant-numeric をご覧ください。
Discussion