kazu22002の技術覚書

PHPer, Golang, AWS エンジニアの日々

Tailwindcssが便利

tailwindcss.com

cssフレームワークであり、classを適用することでwebのレイアウトを作成していくことが可能になります。

twitter bootstrapとは違い機能コンポーネントがあるわけではありませんが、個人的にはtailwindcssで問題なく開発できています。

ネットで調べると表示サンプルはコードがそのまま記載されており、表示のカスタマイズについてかなり楽に行っています。

なにが便利

  • 通化
  • レスポンシブ
  • カスタマイズ

個人的な意見はこのあたりです。

通化

cssを自分で作成すると名称がプロジェクトごとにバラバラになったりしますが、すでに用意してあるclassを使用するため知識を共通化することができたりします。

通化されてるとプロジェクトごとに一から覚えることが少なくなり参加しやすくなると思ってます。

レスポンシブ

Responsive Design - Tailwind CSS

クラス指定で簡単です。

カスタマイズ

UIフレームワークを使用するとカスタマイズするためにかなりの知識が必要になると思っています。レイアウトを変えるために無理やり変えたこともあります。

またバージョンアップする際にUIが変わったりタグが変わったりして大変なことが多く、最近使わなくなってきてます。

Tailwindcssはclassを指定してレイアウトを作るため、カスタマイズは自分次第のため表示イメージがある場合は便利です。

知るきっかけ

laravelに採用されていて知りました。laravel8をインストールした際に表示のcssがよくわからず調べてみるとclassで表示を変えていたことがわかり、Tailwindcssを調べましたね。

もともと使用するクラスを用意して表示を作るエンジニアと仕事をしていたため、簡単に馴染むことができました。以前は欲しいクラスがなくて作るのが大変だったため、Tailwindcssでclassを作らずに柔軟にレイアウトが作れるようになりました。

個人的にはTailwindcssを使い始めてflexboxを理解でき始めたのが、なによりも使って良かったと思うことです。