Authentication




Cancel OK
B!コメントする  2024-12-13 09:36:00 by admin

Bootstrapの代わりに

tailwindを触ってみた。
デザイナーが居ない案件で見栄えをちょっと整えるのに重宝しているBootstrapだがBootstrapは見た瞬間にBootstrapとわかる。
何をどうやってもBootstrap臭が出てくる。
結構な手間とテンプレートを入れるとなくす事が出来るが、さすがにそこまでするなら本職にお任せした方が良い。

Tailwindを触ろうと思ったきっかけはBootstrap以外の選択肢が欲しかったから。
Bootstrapで困ったことはないけど、さすがにこんだけ触ると見飽きてくる。
ユーザーは良くても作ってる方のモチベーションが下がってくる。
なのでお手軽に触れて学習コストも低いものを物色していたらTailwindにたどり着いた。

BootstrapとTailwindの細かい違いは省くが、私が感じたものとしてはBootstrapはだいたい決まったものがあるが、Tailwindは特に無いという点。
例えばBootstrapでボタンを修飾する場合は、それ用のものが用意されているがTailwindはパーツが用意されている感じ。
色を変えるパーツ、大きさを変えるパーツなどを組み合わせてボタンを作る。
Bootstrapだとbtnクラスで出来るがTailwindだと色変えや影や形を変えるクラスを付けて作っていく。
なのでクラス部分を見るとBootstrapに比べてTailwindのクラスは長くなることが多い。
しかし細かい調整が出来るので使いやすい。
その反面どういったボタンにするか?とかどういったデザインにするか?といったものが全くないと逆にTailwindだと難しいかもしれない。
Bootstrapだといくつかのボタンから指定が出来るが、Tailwindでは好きに設定出来るだけにイメージが全くない状態で進めようとすると時間がかかると感じる。

とは言え作りこんでいけばBootstrapより柔軟性も高いことや、ちょっとデザインをいじりたい場合なんかにはとても向いていると感じる。 ちょっとしたことではあるが触ることの出来るフレームワークが増えたので良しとすることにした。

Bootstrapの次に何か触れるものを増やしたい人にはTailwindお勧めです。

https://tailwindcss.com/


デザイン CSS tailwind  

  • コメント
  • コメントはまだありません