この記事は今はやり？のTailwind CSSを実際に使ってみて感じたことやメリット、デメリットに思うことを書いてます。
ありがたいことに様々な開発にかかわらせていただくのですが、今回Tailwind CSSを使ってコーディングすることになり、思ったことを紹介します。
Tailwind CSS使ってみた感想
個人的な意見ですが、Bootstrapなどのフレームワークは、細かい調整が効かないのであんまり好きじゃないです。
なので、Tailwind CSSを使うと聞いた時はちょっと微妙でした。
が、何事も勉強なので、いざ取り組んでみると、こちらなかなか奥が深く、Tailwind CSSで用意されてるクラスである程度のことができるんですよね。
どの程度できるかというと、1px単位で指定できます。
たとえば以下のような感じです。
<div class="text-[20px] mb-[8px]">今プラの記憶行き聞いてます</div>この例だとfont-size:20px、margin-bottom:8pxです。
実際にはこの数値なら、lg,xl,2xlといった規定の数値を使うこともできるのですが、規定の数値がないものはpxで直接指定できます。
CSSフレームワークは限界があると思っていましたが、実際につかってみると、ほんとにTailwind CSSのクラスだけでだいたい実装できます。
すごい！
Tailwind CSSのメリット・デメリット
個人的に感じたメリット、デメリットを紹介します。
メリット
- CSS書かなくてもTailwind CSSの用意されたクラスである程度対応できる
- なのでCSSファイルいらない
たしかにすごいです。
が、普段からコーディングしている人からすると、あんまりメリットはないような気がします。
デメリット
- クラスだらけになって見にくい
- 修正する場合、複数個所で同じ要素があった場合、同様に修正が必要
例えばこんな感じです。
<li class="px-2 lg:px-4 py-4 lg:py-8 bg-white text-lg lg:text-xl xl:text-[40px] font-medium leading-normal">
Tailwind CSSのメリット・デメリットの紹介記事です。
</li>全体的にこんな感じでクラスだらけになります。
もうCSS書いた方がいいよ。
で、面倒なのが、こんなパターン。
<section>
<ul class="flex flex-wrap gap-[16px]">
<li class="w-[50%] p-4 bg-gray-300">要素1</li>
<li class="w-[50%] p-4 bg-gray-300">要素2</li>
</ul>
</section>
<section>
<ul class="flex flex-wrap gap-[16px]">
<li class="w-[50%] p-4 bg-gray-300">要素1</li>
<li class="w-[50%] p-4 bg-gray-300">要素2</li>
</ul>
</section>
<section>
<ul class="flex flex-wrap gap-[16px]">
<li class="w-[50%] p-4 bg-gray-300">要素1</li>
<li class="w-[50%] p-4 bg-gray-300">要素2</li>
</ul>
</section>違うセクションに、同じような要素があった時に、普段なら「.list__item」みたいな共通クラスつくってCSS側で修正できるんですが、Tailwind CSSの場合、すべての要素のクラスを修正しないといけないです。
自分ですべてコーディングしてて把握できてるなら一括置換とかもできるかもですが、複数人で作業してる場合は、そうもいきません。
という感じです。
あとがき
Tailwind CSSはCSS書かなくてもある程度対応できるというすごい高性能なフレームワークです。
コンポーネントごとに整理されたかっちりしたアプリケーションとかの場合、使い勝手がよいかもです。
が、おしゃれなデザイン、アニメーションを多用するＷＥＢサイトには不向きかもしれません。
