「TailwindUI」購入してみました。
「TailwindUI」とは
「Tailwindcss」というユーティリティファーストのCSSフレームワークのコンポーネント集です。
「Tailwindcss」とは
HTML/React/Vueなどで使えるユーティリティファーストのCSSフレームワークです。
CSSフレームワークというと「Bootstrap」や「Bluma」などがあり
コンポーネントのフレームワークだと「MaterialUI」や「Vuetify」が有名ですね。
「Tailwindcss」は他のCSSフレームワークとかなり異なります。ユーティリティだけなので正直他のCSSフレームワークを使うよりは手間がかかると思います。
なぜ「Tailwindcss」なのか
CSSフレームワークを使うと必須になってくるのが拡張するために上書きしまくるという行為です。もちろん本当にそのまま使う場合は問題にならないのですが基本的には調整が必須になってきます。
そうなったときに徐々に破綻していくことが想定されます...。例えば拡張するときのCSS設計がプロジェクトごとに異なるみないなことが起きます。
CSSModuleやグローバルのCSSで作るものに関しても同様でCSS設計の話が出てきます。プロジェクトごとにCSS設計がバラバラで全てを統一することは正直不可能に近いのでTailwindcssという新しい選択肢はかなりありかなと思っています。
「Tailwindcss」はユーティリティなので拡張する際はCSSを上書きする必要もなく拡張でき、CSS設計には依存していないので全プロジェクト同じように拡張していっても大きな問題にはなりにくいかと思います。
「Tailwindcss」の面倒なところ
若干相性などがライブラリ間でわるかったりする。StorybookとTailwindcssを使おうとするとPostcssのバージョン下げないとダメだったりします。
CSSを書かなくてもいいのですがHTMLでCSSを一つずつ指定しているためCSSを書いているのとあまり変わらない気もします。
設定ファイルを記述しないと使えない機能などがあり、設定ファイルがプロジェクト間でおそらく統一できないのでその辺りがコンポーネント使い回すときに壁になりそうな気がしています。
「TailwindUI」をどうして購入したのか
冒頭で説明しましたが「TailwindUI」は、「Tailwindcss」というユーティリティファーストのCSSフレームワークのコンポーネント集です。
サービスの価格は、「249ドル（+ $ 24.90税）」で正直最初高いと思いました。しかし、大きなメリットがかなりあります。
- 永久ライセンス
- 永久アップデート対応
- Figmaのデザイン付き
- 公式が運用してる
- そろそろEC用のコンポーネントも追加されるらしい
- コミュニティにも参加できる
これだけのメリットがあり今後もコンポーネントが追加されることを考えれば安いと思えてきました。
買った理由としては、ベストプラクティス的なUIでどうやってサイトを作っていけばいいのかを学びたかったところと、コピペだけでダッシュボードをゴリゴリ作成していけたらなぁと思って購入しました。
MaterialUIで作るものに比べてTailwindcssでつくるものは自由度が高く、コーポレートサイトやLPにも使用できるかと思います。
TailwindcssとMaterialUIやCSSファイルを一緒に使っているような事例はよく目にしますが最適なのかよくわからないので公式が出している推奨された使い方を常に見れるようにしておきたいなと思いました。
CSS設計のベストプラクティスは色々な説があり一つに絞りきれないような印象があるのでプロジェクト間で異なることは大いにあると思います。
TailwindcssでCSS設計の戦争を側から眺めるだけの立ち位置になりたいなと思います。こっち側の人が増えればいいな。
Tailwindcssも色々とデメリットは出てくるかもですが一度試してみることをお勧めします。公式サイトのドキュメントがかなりしっかりしていて不自由なく使えます。