[css] tailwind

CSSのフレームワーク。Utility-Firstうたっていてプロパティレベルの定義を簡単に実装できる

utility firstなcss framework

CSSは個人的にあまり触っておらず、腰が引けていたカテゴリの技術でした。ただ、今回このutility-firstなコンセプトのtailwindは私にはぴったりでCSSを頑張ってもいいかもと 思わせるパッケージです。

特徴

記法が直感的かつ簡単

基本的には、class属性にstyleを事前定義したクラス属性を設定することでstyleを適用させるコンセプトです。そのため、従来のclassなどにstyleを定義して共有して使用するような大規模サイトには向かないかもしれません。 ただ、CSSもわからないような人間には直感的なstyle定義をclassに直接記述することで実現できるのは非常に魅力的です。

従来

tailwind 直接style定義をclass属性に記述するだけでOK。

設定

respnsive designに対応

画面サイズに応じて適用するstyleを使い分けられるので、簡単にPC向け、モバイル向け共用デザインであるレスポンシブデザインに対応したものが作れる。

私が思う課題

まだ使いこなしていないので、実はできちゃうかもしれませんが私がざっと使用したところで課題だと感じだことは。

• 従来は特定のstyle表現をclassでエリアスして、それを使いまわすということができなさそう。都度同じものをコピペすることになるのでレイアウト変更時には大変かも。