Tailwind CSS
ﾁｮｯﾄﾃﾞｷﾙ
になろう
なんでTailwindCSSを取り上げたの？
記事として取り上げやすそうだった
メリット
レスポンシブ対応が楽
クラス指定でブレークポイントを
指定できるというのが非常に楽です。
要素に対してホバーしたとき、
カーソルを合わせた時の指定も楽
同じくクラス指定で
ホバー時とカーソル合わせた時の
指定もできます。スゴイ
元のテーマカラーかがないため、
自分のオリジナリティを出しやすい
CSSライブラリやUIライブラリは
そのライブラリやフレームワーク側が既に決定したデザインで使用することになる。
サイト内の要素に対して指定できる
デザインの幅の限界を決めてしまう
ことになります。
Tailwindは既存のCSSプロパティの指定のパターンをそれぞれCSSクラス化だけに過ぎないので、
自分がしたいデザインを好きなように実装できるようになります。
ダークテーマ対応がしやすい
ダークモード対応の手順が
既にドキュメントに書いてあって、
それを使うだけでダークモード対応も可能。
デメリット
クラス指定で色々やるからひたすら
クラス指定しないといけない。
「クラス指定でなんでもできる」
それはつまり...
「クラス指定でなんでもやることがTailwindCSSの使い方」 であるため、TailwindCSSでスタイリングするとき、ひたすらドキュメントとにらめっこ
しながら書くことになる。これが正直めちゃくちゃ負担。
規定されたクラスでは
できないこともある
その上、規定されたクラスのみでは
できない指定があるので、
それを受け入れる必要がある。
CSSを普通に書くのはよくないの？
TailwindCSSに頼りきりじゃなくて
CSS書けるようになろう。
それがベスト。
その上でライブラリ選定をしてTailwindCSS使うならよし。
これから心がけていくべきこと
クラス名を
だらだら書くの
やめようね
そのためのテクニック
@layerと@applyを使いこなす
以下のようにすると、
最初から要素にある程度の指定を
しておくことができます。
@layer base {
h1 {
@apply text-2xl font-extrabold
}
p {
@apply text-blue-600
}
html {
@apply bg-yellow-100
}
}
[]を使った指定を行う
border-[3px]で
Borderのpixel数を3pxにすることが
できるように、特定の指定値を[]を使って与えることができる。
tailwind.config.jsの
theme.extend で、
どんどん好きな指定を
拡張していく！
ここから先は
自分の手で試してみてほしいので、
参考になるリンクだけ
提供しておきます。
TailwindCSS Play ~Typing Amimation~