Tailwind CSSとは

CSSフレームワークの一種。CSSを書かなくてもクラス名を付けるだけでスタイリングができるようになる、便利なフレームワークです。

例えば：

<divclass="hoge">fuga</div>

というHTMLにheight: 12px;を掛けたい場合、

<divclass="hoge">fuga</div><style>.hoge{height:12px;}</style>

と書く必要があるわけですが、Tailwind CSSを使えば

<divclass="h-3">fuga</div>

と書くだけでheight: 12px;が掛かります。その他主要なCSSプロパティに対応したクラスが用意されており、いちいちCSSを手動で編集する手間を省くことができる優れものです。

Tailwind CSSはpx指定ができない

上記の例で示したようにheight: 12px;は.h-3というクラスで指定できるのですが、height: 400px;みたいな、任意のheightやwidth、padding、marginなどをpx指定で掛けたいときは結局CSSを書くしかなくなります。

不便すぎる...

任意の.scssファイルに以下を書けば解決

SCSSという、動的な定義を使えるCSS記法が存在します。これを使って、以下のようにクラスを動的に定義すればpx指定できないのが不便すぎ問題を解決できます。

@for$ifrom1through1024{.h-#{$i}px{height:#{$i}px;}}

こんな感じにすれば.h-400pxクラスでheight: 400px;を指定できる、といったクラスが1~1024pxの間で定義できました。これで、px指定できないのが不便すぎ問題を解決できましたね。

※繰り返し回数をあまり大きくしてしまうと、読み込むCSSが肥大化してページ速度低下の原因になるので、程々にしましょう

まとめ

• Tailwind CSSというフレームワークが便利なので使おう
• Tailwind CSSでpx指定できない問題はSCSSのfor文で解決可能

筆者連絡先

https://twitter.com/soeno_onseo