Tailwind.cssを使ってみて
Tailwind.css とは
cssフレームワーク
ユーティリティファースト
Tailwind.cssの特徴(公式そのまま)
ユーティリティクラスであることで、決められたスタイル内で記述する必要がある
スタイルが制限されるので一貫性を保ちやすい
クラスの粒度が細かいことで、同じhtml構造のコンポーネントでも全く異なる外見にできる
本番用にビルドする時、未使用のCSSを全て自動的に削除するため、最終的なバンドルサイズが可能な限り最小になる
Think of Tailwind like a giant box of LEGO — you dump it all out on the floor and build what you want to build, then when you're done you put all the pieces you didn't use back into the box.
レスポンシブの指定が簡単
ホバー等の指定も簡単
ダークモードが実現可能
基本のスタイルをカスタマイズ可能
code: example
/* これがあることでpreflightが有効になる */
@tailwind base;
/* @layerでbaseを指定することで基本スタイルに加えられる */
@layer base {
h1 {
/* @applyを使うとcssでtailwindのクラスが指定可能 */
@apply text-2xl;
}
}
VScodeの拡張がある
ドキュメントからいくつか抜粋
こんなのもある
フォームパーツのカスタムCSS
デフォルトの設定をいじれる(アイコン、色、大きさ等を変えられる)
使ってみて感じたこと
メリット
命名を考える手間が減った
わかりやすいクラス名を考えるのに結構時間使ってたので時間短縮になってる
ストレスも減る
メディアクエリの記述が楽
htmlを書く流れでスタイル指定できるので移動が少ない
デメリット
htmlのクラス部分が多くなると少し見辛い
クラスを最小限にするモチベーションにはなる
都度、ドキュメントを検索する必要がある
cssも詳しくはないから、自分的にはそんなに変わらないかも。。
慣れるまで時間がかかる
最初は、それぞれのクラスが何を指定しているのかわからないため参考にしづらい
remのため、デザインと数pxのずれが生じることがある
デザイナーさんが許してくれない場合、大変なことになりそう(カスタムcssばかりになる)
質疑
tamuraryoya.icon hover した子要素のスタイルを変更したい場合はどんなふうに書けばいいんでしょうか？
tamuraryoya.icon Sassでいう、mixinみたいなことはできるんでしょうか？
できる
@apply
TJ.icon @apply は超強い、何でもできます。
tamuraryoya.icon display: grid の grid-template (grid-area的な） とかってtailwindcssにヘルパーがあったりするんでしょうか？
できないかも
tamuraryoya.icon クラス名の誤りには気づけますか？
ランタイムとかチェックとかはなさそう
タイポとかには比較的気づけそう
TJ.icon すぐ気づけます。クラス名の誤り場合、vscodeに詳細を表示しない。例えば
https://gyazo.com/97d307003618fc067df9f302bf4866d6
umamichi.icon tailwind で表現できないcssを実装する際は、inline style か、クラス名を付けてcssを書く必要が出てくると思うのですが、そのパターンは実際の案件でどれくらいありますか？
クラス名（tailwindっぽい名前）をつけてやっている
max-width が対応できなかったことがよくあった
1画面に1箇所あるかないかくらいの数
tamuraryoya.icon tailwindcssで書く上で難しかったデザインはありますか？
99%くらいはtailwindcssだけでいける
幅が大きすぎたり小さすぎたりするときに考える
andsaki.icon nth-childの3nとかがtailwindにない
onuma.icon tailwindcssでの書き方を調べるのにどのくらいかかりますでしょうか？（慣れるのにどのくらいかかりましたか？）
1、2週間くらい
tamuraryoya.icon tailwind.cssでanimation（@keyframes）を使うことはできますか？
デフォルトのアニメーションはあるが、基本的はデザイナーマターなので用意してもらった方が良い
tamuraryoya.icon 案件で擬似要素を使いたいときはどう書いていますか？
独自のクラスを使ってやっている
umamichi.icon 使うクラス名は覚える必要がありますか？
ルールを暗記すればある程度は実装できる
tamuraryoya.icon CSS書くのとtailwindcss書くのどちらがいいですか？
クラス名の命名を考えなくて良いからtailwindcssのほうがいいかも
tamuraryoya.icon 案件でtailwindcssのクラス名の順番とかは決めていますか？（ルール的なものがあるか）
nishiyamayudai.icon 気になってる
(案件では)レスポンシブのクラスは後半の方になるようにしている
onuma.icon tailwindでクラス名は平均してどのくらいの数になるのでしょうか？
大体は1〜４個
まれに6個くらい
基本的にprettierで改行されるほどの個数にはならない