Tailwind CSSのメリット
軽量化の仕組み(Purge CSS)がある
Tailwind CSSは、Purge CSSというツールと併用するのが基本。
このツールを使うと、未使用のCSSを削除することができる。
これにより、Tailwind CSSで記述したCSSの中で効いていないものについては、削除して軽量化することができる。
同じく外部と通信をしながら利用するBootstrapと比べても、1/15くらいにはファイルサイズを留められる。
Javascriptと切り離されている
Tailwind CSSにはJavascriptファイルが関連していない。
CSS以外の動きを出す場合には、別途自分でJavascriptを記述する必要がある。
これはいい事である。
昨今のWeb開発にはReactやVue.jsなどのJavascriptフレームワークを用いることが多く、
CSSのツールの中にJavascriptが含まれていると競合して動きが変になる場合がある。
Tailwind CSSではJavascriptが入っていないため、
ReactやVue.jsユーザーにも好まれている。
Tailwind CSSのデメリット
HTML側の見た目が悪い
HTMLファイルの可読性(読みやすさ)が悪くなってしまう。
理由は、クラス名にたくさんの指定を直書きするためである。
特にレスポンシブ対応の指定もclassに書く場合には、さらに長くなってしまう。
これは慣れれば解決する問題ではある。
だが、ずっとCSSを書き続けて来た人にとってはハードルが高いようである。
しかし、そもそもたくさん書かれたCSSファイルというのも見づらいものだ。
何ページにも渡るデザインを作った人ならば、CSSファイルのどこに該当のコードを書いたか分からなくなった経験があるだろう。
さらに、一見不必要に見えるCSS記述でも、消す事でどっかに不具合が出るのが怖いから消せない。
結果としてどんどんCSSが伸びていく、というのもよくある話だ。
これらの悩みは、各HTMLに直接記載するTailwindであれば解決することができる。
なので可読性については、総合的に見ればプラスなのではとすら思える。
静的(Javascript不使用)のWEBサイトには向いていない
HTMLとCSSを基本としてWEBサイトを制作する場合には、Tailwind CSSは向いていない。
理由は、同じCSSがかかっているもの(共通のclass属性)を一括編集できないからだ。
通常のCSSでは同じクラス名のものはまとめてスタイル変更できるが、Tailwindの場合には個々のHTMLタグそれぞれに対してclass属性部分でCSSを指定しているため、一括変更はできない。
一応、Tailwindでも同じclass属性のものを検索して一括変更することで対応できるが、意図しないタグまで含まれてしまったり、同じ指定内容でも書く順番が異なっていると検索対象にひっかからないのがネックだ。
しかし、この問題は根本的に間違っている。
そもそも、Tailwind CSSはコンポーネント化を想定して作られたフレームワークだからだ。
通常は、Javascript(Reactなど)を用いて、共通デザインのものはコンポーネント化(テンプレートパーツ化)する。
そのため、何個も同じデザインのHTMLタグを生成するような開発手法を想定していないのだ。
Javascriptを使わず(もしくはコンポーネント化しない)でCSSのクラスでデザインを一元管理したい場合には、普通にTailwindを使わずCSSを書いた方がいい。
もっとも、コンポーネント化せず直書きするようなCSSのサイトであれば、そもそもノーコードツールをつかってHTML,CSSなしで作ってしまった方が楽ではあるが。
Tailwind CSSを知らない人が使うと崩壊する
Tailwind CSSは通常のCSS記載方式とはかなり異なる書き方だ。
そのため、通常のCSSやSASS記法しかしらない人が見ると、なんのこっちゃ分からない。
開発はTailwindでやったが、修正は別のコーダーに依頼するとなった場合に大変なことになる場合がある。
最悪の場合、class属性を追加して、そのclassに対しCSSを書いていってしまうかもしれない。
そうなったらTailwind CSSと通常のCSSの指定が入り混じったカオスが出来上がる。
「知っている人しか使えない」というのは、意外とデメリットである。
コメント