1 min read

Tailwind CSSを使うと何がうれしいのか調べてみた

nabeen

僕が今使っているこのテーマにも使われている Tailwind CSS。

正直知らない子だった。すまん。

字面がなんか Thailand に似てんな?と思ってしまった。ごめんなさい。

Tailwind CSS とは

とりあえず GitHub と公式サイト。

こういう謳い文句なんだけど...なんだかよくわからんね。

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind CSS は高度にカスタマイズ可能な低レベルの CSS フレームワークであり、オーバーライドするために戦わなければならない面倒な意見のあるスタイルなしに、オーダーメイドのデザインを構築するために必要なすべての構成要素を提供します。

デザインサンプル

まずはどんなスタイルが当てられるのかを見てみる。これは「良いデザイン」と「良くないデザイン」を比較しているやつなのでちょっと趣旨が違うけど、Tailwind CSS でこんな感じに作れるぜっていうイメージが出来た。

普通にオシャレ。Bootstrap だと、THE Bootstrap って感じのやつしか作れないけど、これはめっちゃいい感じ。

Tailwind CSS の概要

こちらの記事が参考になった。

Utility First ってのが一番の売りらしく、CSS プロパティとかブレークポイント、疑似クラスのシンタックスシュガー(と言っても過言ではない)のクラスが用意されていて、一回覚えちゃえばシュッとデザインが組める感じがある。

まぁこの一回覚えちゃえばってのが、普通につらいんですけどね...。

あとtailwind.config.jsで独自に定義・拡張出来るのも使いやすい。これでスタイルガイド的な使い方をしておけば、各 Component とかで style 書くとかしなくていいのでは?って感じがする。クラスをうまく当てていく感じで。

で、これ結構ボリューミーだし、そもそも僕自身 CSS にそんな明るくないので、多分バリバリに使っていくには、2-3 ヶ月とかは普通に掛かりそう。一方でどっかで工数かけてやれば、その後の開発で楽できる気がする。

実務で試すには新規案件くらいしかないけど、今ちょうど転がってるのでね、へへ。

Elm との組み合わせが有用かも?

単純に僕が Elm 気になってるってだけなんだけどね。

ただこれまでは、実はちょっと難色をを示していて、Elm だと例えば Vuetify みたいな UI フレームワークがないんですよね。UI 作るの僕ホント嫌いだし苦手なので、こういうのがないのはなーって二の足を踏んでいた。

でも Tailwind ならクラス当てるだけでいい感じに出来そう(完全に妄想だけど)なので、ワンチャンあるんじゃね?って思った。その用途なら Bootstrap でいいじゃん!って言われそうだけど、これに関しては返す言葉もありません。

P.S.

なんで Tailwind CSS を調べたかって、このブログで使われてるってのもそうなんだけど、密かにポートフォリオサイトの方も Gridsome に載せ替えようと目論んでいて、こっちで気に入ったテーマも Tailwind CSS を使っていて。

Gridsome - Gridsome

こっちでもあっちでも使われてるってことは、多分人気ってことなので、このビッグウェーブに乗るべきかなと。

...というのは建前で、今後は実務でフロントエンドをやる機会も増えそうな機運があって、色んな引き出しを持っといた方がお賃金的にもいいよな?という下心が本音。