未分類

流行りのTailwind CSSの採用基準【使い分け】

近年、Tailwind CSSが普及してきています。
気にはなるもののアプローチが特殊すぎていまいち採用しきれないという方も多いのではないでしょうか。
CSSとアプローチが真逆なため「最高!」という人と「最低!」という人と評価が両極端といったところですが、
いい悪いというより「そもそもTailwind CSSが向いている向いていないがある」と感じましたので所感をまとめました。

Tailwind CSSとは?

そもそもTailwind CSSって何?何が嬉しいの?というところです。
通常、CSSはスタイルと関係ないクラスを適切に振り分け、そのクラスにそれぞれスタイルを割り当てていきます。
そのため、CSSでは赤くしたいからと"red"というようなクラスを作って、赤くしたいところにそのクラスを当てるのはアンチパターン(ダメな例)とされています。

しかし、Tailwind CSSはそのアンチパターンに振り切って、クラス名を考える手間をなくしたりとメリットを出しています。
レスポンシブなどに対応した新CSSでHTMLにstyle直書きをするイメージです。

誤解を恐れずにいえば、Tailwind CSSはDIY用品のような、アマチュア向けプロユース対応商品といえるものです。
CSSとかSassとかわからない素人でも使いやすいように作られており、かつ十分プロユースにも耐えられるものです。
簡単なものを量産するのにはプロユースのもの(Sassなど)より取り回しがよいです。しっかりしたものを作るにはプロユース専門のものに軍配があがります。

Bootstrapとの比較

Bootstrapも簡単にスタイルを実装するものなのでよく比べられますが、性質はかなり違います。
使い所で行くと
デザインを考える手間もなるべく省いて用意されたもので簡単に実装したいならBootstrap、
デザインは独自で作成して簡単なサイトを作るならTailwind CSS
となるかと思います。

Tailwind CSSの特徴

◯:クラス名を考える必要がない

クラスは最初から用意されています。
スタイルを当てたいところに用意されたクラスを当てるだけです。

◯:独自性が高くCSSやSassの知識があまりなくても始めやすい

独自性が高く、ほぼCSSとは別物です。
CSSを拡張したスタイルのようなものなのでCSSよりはとっつきやすいでしょう。
CSSを習得していてもいなくても学習コストはかかるので、ある意味前提知識が少なく初心者でもやりやすいかと思います。

×:依存度が高すぎる

前述の通り独自性が高く、CSSやSassができても専用の学習が必要で、かつこれを使えるようになってもCSSが使えるようにはなりません。はっきりいって別スキルです。
組織で使うなら採用もTailwind CSSができる人を選んでいく必要があります。
コンポーネントは現状有料買い切りですが、依存度が高すぎるので今後もしサブスクリプションとかになっても離脱しづらいです。

ちなみにSassも対応していますが、Tailwind CSSでSassは正直中途半端です。
公式でもyou don’t need to use a preprocessor with Tailwind使えるけどいらんよ)というスタンスです。

×:HTMLがめちゃくちゃ見にくい

スタイルを外部ファイルに切り分けないのでHTMLがごっちゃごちゃでめちゃくちゃ汚いです。
Javascriptのために属性を当てたりしている場合など、どこに何があるか把握するのが嫌になります。

×:実質HTMLにスタイルを書いているのでキャッシュが効かない

通常のCSSのような共通の静的ファイルは小さいので、1ユーザーが複数ページを回遊するようなサイトだとキャッシュされないことにより通信コストが増大します。
これは、実際に通信費がかかるという意味もありますが、ユーザー側も毎回ページ表示が若干遅くなることも意味します。

×:一括でスタイルを変えられない

スタイル直書きなので「サイトリニューアルで雰囲気を変えたい」というときにすべて手作業で1箇所ずつ変更することになります。
TailwindとしてはReactやVueなどでモジュール分離してパーツごとに使いまわしているようなプロジェクトでの利用を想定しているように感じます。
そのため「パーツごとにクラス当て直せばいいよね」という感覚のようですが、
それでも面倒ですし、切り分けしてないともはやゼロからの作り直しの方がマシといったケースもありえます。

ちなみにダークモードはTailwindが用意してくれているので可能ですが、
Tailwindが機能を用意してくれないとこのような機能を独自で実装は困難です。

まとめ

向いているプロジェクトと向いていないプロジェクト

初期開発、初回訪問時のアクセスに強いので、作って終わりでメンテなしの単発のLPやプロモーション/ブランディング用サイトには相性がいいでしょう。
納品形式で受託開発を行なっている会社や個人であれば使えると効率が上がるかと思います。

一方で、メンテナンスや2ページ目以降のアクセスには弱いので継続開発していくようなWebサービス開発には向いていないと感じます。
自社サービスを継続開発していたり、そういったサービスの担当であれば採用すると後悔しそうです。

もう一つ、最近ではReactなどコンポーネント単位でフロントを開発していく流れがあります。
コンポーネント単位で開発する場合にはBEMなどは適用しにくいのでTailwindは選択肢として有用性が高いです。

習得する方がいい人とそうでない人

独自性が強くCSSと似て非なるものなのでCSSの延長で使えるという感じではありません。
習得する価値があるかどうかについては、当然まず属するプロジェクトがTailwind CSSを使っているかどうかに準じます。

(今後入る予定も含めて)プロジェクトの都合がなければ、
現状CSSが使えないで今から覚えるという段階の人にはCSSやらずにTailwindから覚えてしまうのも割とおすすめです。
すでにCSSが使えるのであればコストをかけてまでこれを新しく習得するかは、受託開発の会社に転職したいなどでなければ特に覚える必要はないかと思います。

プロジェクトや状況に応じてうまくTailwind CSSの使い所を判断できるといいですね。

-未分類