Tailwind CSSのデメリット

HTMLファイルの可読性(読みやすさ)が悪くなってしまう。

理由は、クラス名にたくさんの指定を直書きするためである。

特にレスポンシブ対応の指定もclassに書く場合には、さらに長くなってしまう。

これは慣れれば解決する問題ではある。

だが、ずっとCSSを書き続けて来た人にとってはハードルが高いようである。

しかし、そもそもたくさん書かれたCSSファイルというのも見づらいものだ。

何ページにも渡るデザインを作った人ならば、CSSファイルのどこに該当のコードを書いたか分からなくなった経験があるだろう。

さらに、一見不必要に見えるCSS記述でも、消す事でどっかに不具合が出るのが怖いから消せない。

結果としてどんどんCSSが伸びていく、というのもよくある話だ。

これらの悩みは、各HTMLに直接記載するTailwindであれば解決することができる。

なので可読性については、総合的に見ればプラスなのではとすら思える。

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は通常のCSS記載方式とはかなり異なる書き方だ。

そのため、通常のCSSやSASS記法しかしらない人が見ると、なんのこっちゃ分からない。

開発はTailwindでやったが、修正は別のコーダーに依頼するとなった場合に大変なことになる場合がある。

最悪の場合、class属性を追加して、そのclassに対しCSSを書いていってしまうかもしれない。

そうなったらTailwind CSSと通常のCSSの指定が入り混じったカオスが出来上がる。

「知っている人しか使えない」というのは、意外とデメリットである。