Tailwind CSS初心者が絶対ハマる落とし穴
Summary
TLDRこのビデオスクリプトでは、テールウンドCSSの初心者がよく遭遇する2つの問題点とその解決策について解説しています。クラス名を動的に組み立てることができないという問題と、クラス名のコンフリクトが起こることについて説明し、解決策としてシンプルなクラス名の使用や「tailwind-merge」ライブラリの活用を提案しています。スクリプトは、テールウンドCSSの仕組みを理解することの重要性を強調し、より効果的にこのCSSフレームワークを活用する方法を示しています。
Takeaways
- 🔧 初心者が絶対はまるであろう2つのポイントを紹介している。
- 🛠 クラス名を動的に組み立てると、Tailwind CSSのスタイルが適用されないことがある。
- 🎨 Tailwind CSSのクラス名を動的に組み立てると、エラー時のスタイルが正しく適用されない問題が発生する。
- 📝 クラス名のコンフリクトが起こると、後から定義されたスタイルが優先されるため、予期しない結果になることがある。
- 🔄 Tailwind CSSの仕組みを理解することは重要で、CSSの最終出力順序に依存するため、クラス名の順序は問題を引き起こす。
- 📖 Tailwind Mergeというライブラリを使用することで、クラス名のコンフリクトを解決することができる。
- 👷♂️ 動的なクラス名の組み立てを避けることで、Tailwind CSSの使用をより効率的に行うことができる。
- 🛑 クラス名のコンフリクトを避けるために、デフォルトのスタイルを上書きする際には、Tailwind MergeのTWマージ関数を使用する。
- 🚫 Tailwind CSSのクラス名を動的に組み立てることができない理由は、TailwindがCSSファイルを生成する際に完全一致の文字列を探しているため。
- 🔄 Tailwind CSSの出力順序はアルファベット順ではなく、最終的に定義されたスタイルが優先されるため、注意が必要。
- 🛠 Tailwindバリアントという別のライブラリも存在し、より便利な機能を提供していると述べている。
Q & A
テールウンドCSSとは何ですか?
-テールウンドCSSは、CSSのクラス名を動的に組み合わせてスタイルを適用することができるCSSフレームワークです。
初心者がよく踏むテールウンドCSSのポイントはどのようなものですか?
-初心者がよく踏むポイントは、クラス名を動的に組み立ててしまうパターンと、クラス名のコンフリクトです。
クラス名を動的に組み立てるとどうなりますか?
-クラス名を動的に組み立てると、テールウンドCSSの解析に失敗してスタイルが適用されないことがあります。
クラス名のコンフリクトとは何を指しますか?
-クラス名のコンフリクトとは、同じ要素に複数のクラス名を指定し、後のクラス名が優先されるため予期しないスタイルが適用されることを指します。
クラス名を動的に組み立てずにどうすればよいですか?
-クラス名を動的に組み立てずに、代わりに個別のクラスを指定することで、スタイルが正しく適用されるようにすることができます。
クラス名のコンフリクトを解決するためには?
-クラス名のコンフリクトを解決するためには、後から適用されたクラスを優先的に指定することで、スタイルの競合を避けることができます。
テールウンドマージとは何ですか?
-テールウンドマージは、テールウンドCSSで提供される機能で、デフォルトのスタイルとカスタマイズしたスタイルを統合して出力するもので、スタイルの競合を解決するのに役立ちます。
テールウンドCSSの仕組みを理解することはなぜ重要ですか?
-テールウンドCSSの仕組みを理解することは、正しくスタイルを適用し、予期しない動作を避けるために重要です。
テールウンドバリアンとは何ですか?
-テールウンドバリアンは、テールウンドCSSのバリエーションで、より柔軟なスタイルの適用やカスタマイズを提供するライブラリーです。
テールウンドCSSを使い始める際のアドバイスはありますか?
-テールウンドCSSを使い始める際は、まず基本的な仕組みを理解し、実際に手を動かして挙動を確認することで、理解を深めることができます。
テールウンドCSSでスタイルを適用する際の注意点はありますか?
-テールウンドCSSでスタイルを適用する際は、クラス名を正しく指定し、動的な組み立てやコンフリクトを避けることが重要です。
Outlines
😀 Tailwind CSSの初心者が陥りやすいポイント
この段落では、初心者がTailwind CSSを使い始める際に陥りやすい2つのポイントについて説明しています。1つ目は、クラス名を動的に組み立てるパターンで、JavaScriptなどを使用して条件分岐を記述する際に、Tailwindのクラス名を動的に組み立てると、予期しない動作になることがあるという問題点です。2つ目は、クラス名のコンフリクトで、同じスタイルを複数回指定しようとすると、CSSの優先順位のルールにより予期しない結果になることがあるという問題です。
😀 Tailwind CSSの仕組みと解決策
この段落では、先程説明した問題点に対する解決策を提案しています。まず、クラス名を動的に組み立てる問題に対しては、共通の部分を残して、異なる部分だけをJavaScriptで動的に指定するというアプローチを避けることを提案しています。次に、クラス名のコンフリクトに対する解決策として、Tailwind Mergeというライブラリを使用して、デフォルトのスタイルとカスタマイズされたスタイルをマージすることを提案しています。また、Tailwindの仕組みについても触れており、最終的なCSSファイルの生成プロセスが文字列の完全一致に基づいていること、そしてCSSの優先順位に関するルールが問題の原因になっていることを説明しています。
Mindmap
Keywords
💡テールウンドCSS
💡クラス名の組み立て
💡CSSのコンフリクト
💡テールウンドマージ
💡スタイルの優先順位
💡条件分岐
💡CSSの出力順序
💡スタイルシート
💡テールウンドバリアン
💡clsx
Highlights
紹介したい2つのポイントは、初心者が陥りやすいテールウンドCSSの落とし穴。
第1のポイントは、クラス名を動的に組み立てることで生じる問題。
動的なクラス名の組み立て方と、JavaScriptでの条件分岐によるクラス名の生成が問題となる理由。
テールウンドCSSのクラス名のコンフリクトが2つ目のポイント。
クラス名のコンフリクトの例として、背景色を黄色から赤に変えたい場合の問題点。
CSSの優先順位とテールウンドCSSの出力順序の違い。
解決策として、クラス名を動的に組み立てるのをやめること。
テールウンドマージライブラリの紹介とその使い方。
Reactなどのフレームワークでのデフォルトスタイルとカスタマイズスタイルの統合方法。
テールウンドマージのTWマージ関数の活用方法。
テールウンドCSSの仕組みと、CSSファイルの生成プロセス。
テールウンドCSSの抽出プロセスにおける文字列の完全一致の重要性。
テールウンドバリアンという別のライブラリーの存在とその利便性。
clsxのようなよくある組み合わせ技とテールウンドバリアンの比較。
テールウンドCSSの初心者向けのアドバイスと、手を動かして確認するよう促す。
動画の締めくくりと、今後の予定についての告知。
Transcripts
はいどうもこんにちはムールチャンネル
です今日はですねテールウンドCSSに
ついてま話していきたいなと思うんです
けどいいですねテルウンドCSSの初心者
が絶対はまるであろう2つのポイントが
あるのでそれを紹介したいな
とまそのはまるポイントとま解決策となん
でそれが起こるのかっていうテール
ウィンドの裏側の仕組みを軽くあやっぱ
この仕組み知れるのがいいですね嬉しい
ですねはい
そうじゃ早速なんですけどはまるポイント
ま2つあるんですけど1つはクラス名を
動的に組み立ててしまうていうパターン
はい組み立てますね最初ははい組み立て
たくなりますよ組み立てたくなりますこれ
は例えば背景青にしたいんだけどエラーの
時には赤くしたいという時ありますねま
これJavascriptとかでこう条件
分岐を書こうとするとそのテイルウンドっ
てあらかじめ決められたクラス名をま指定
していくんですけど例えばBGBL500
うんうんいう風にすると背景青色になり
ますでこれをエラーの時には赤くしたいの
でBGレッ500にしますとうんでこれ
効率的にJavaScriptで
組み立てようとするとBG配でドルマーク
ブレースでなんかカラーとかっていう変数
があってで500っていうBGと500の
最初と最後はも固定で中身のレッドと
ブルーだけJavaScriptで
切り替えるコードま書くと思うんですけど
いいですねまこれ動きませんそうなんです
よねまでもプログラミングやってたら
なんかこういう風になりますもんそうなん
ですよねま効率的にだってね共通部分は
残して同的な部分だけうんそうなりました
もんプログラミングってこういう風になっ
てるでもそれは動かないってのはまず1つ
ですねうん
うんで2つ目がまクラス名のコンフリクト
例えば背景色をえっと黄色にしていてま
それを赤に変えたいっていう時にBG
イエロー500とBGレッド500があっ
てうんふんふえ最初デフォルトはイエロー
なんでBGイエロー500が書かれてます
でそこにクラス目で追加してBGレ500
を指定しますうんうんこうするとまCSS
って基本的に後に定義したものの方が優先
されるのでイエローじゃなくてレッドが
優先されるんじゃないかと思うじゃない
ですかはい上書きしてる感じがしますよね
そうでもそうならないんですならないん
ですよこれがねならまこれがそのクラス目
によって上書きされたりされなかった
りっていうものがあるんでうんこれがまた
厄介ですねそうなんでここのコンフリク
トっていうのは繊細な作業を伴うので
なかなか難しいとそうですよねっていうま
ちょっとテルウンドませっかく使ったのに
ま今言った2つのポイントでなんかうまく
動かないとかでちょっとけがさしてテイル
ウンドCS使うのやめようってなると
ちょっともったいないのでそれもったい
ないですねはいちょっとしたことでこの
解決策あのできるのでまそれをお伝えし
たいなと思います
はいで1つ目のその解決策のクラス名を同
的に指定してうまく動かないっていう
ケースはこれシンプルでえ同的組み立てを
やめましょうとうんいうことですねうん
BG数500っていう中途半なそのじゃ
なくてもうBG500BGRed500
っていうもう文字列自体を出し分け
るっていうやり方にま書き換えた方がいい
ですよとこうするときちんと赤と青
切り分けられるとシンプルですねそうま
少しなんていうかもっさり感をそうだね
感じなくもないんですけどシンプルですね
まちょっと全体的に長くなっちゃうのが嫌
だな気になるかもしんないですけどまテル
ウンはこういうものですというところです
ねうんうんあるいはあれですかセーフ
リフトを使うていう手もなくもないけどま
でもこれはそんなに推奨されてないので
そうですねうんまよっぽどの確か
ドキュメントにもなんかよっぽどのことが
なければ基本使わないでこれしないとでき
なかったらま最終手段としてやってね
みたいなことはあですね
うんで2つ目はそのクラス名の
コンフリクトの解決策なんですけどこれ
はんテイルウンドマージっていうその
ライブラリーがあるのでまそれを使い
ましょうというところですねで具体的には
まよくリアクトとかでもクラス名をこう
デフォルトのスタイルが立ってる
コンポーネントがあってそれに対して
カスタマイズしたスタイルを指定したい
みたいな時にま変数をカスタマイズする
クラス名の変数を渡すんですけどえこれを
単純に文字列結合でカスタム変数をBGB
500のにカスタムをこう入れてモレスと
して返すのではなくてテウンドマージの
提供されるTWマージっていう関数がある
のでまそれで引数にデフォルトのスタイル
のBGBL500で2つ目の引数に
カスタマイズしたいま要は上書きしたい
スタイルを当てますそうするとBGレッ
500だけが出力されるのでブルーなのか
レッドなのかっていうのはもはや気にする
ことなくえ明治的にスタイルを指定する
ことができるっていうこれは便利ですね
そうですねまぶっちゃけこのテルウィンド
マジ使わないとかなりしんどいですねそう
ですねだから僕はテイルウィンドマージを
使わずにインポータントされてる行動を身
にすることもありますなるほどまそれも
ある種努力の結果なんですねそうですねま
とりあえずつけとけばびっくりつけとけば
まそっちが勝つていうねまただそれはま
もちろんあまり良いそうま良くはないです
策ではないので
はいなんでこういうことが起こるのかって
いうまテイルウンドの仕組みをちょっと
話したいんですけど番知りたいですはい
うんあの動的にクラス名を組み立てるのは
ダメですよていうのはなぜかと言とテル
ウンドってその最終的にそのCSSの
ファイルを作成するんですけどその作成
する仕組みが対象の例えばHTMLとか
リアクトのjsxとかっていうソース
コードのファイルの中を解析してBG
Red500があればBGRed500の
スタイルを抽出するんですけどその抽出は
もう完全に文字列の完全一致うんうんなの
ででその間に変な変数とか入ってると
ヒットしないつまりスタイルは抽出され
ないので適用されませんというまそういう
仕組みなんですねとてもこれシンプルで僕
も最初にした時にあまそういうことかとま
それだったら確かにできないなっていう
思うぐらいバカみたいにシンプルですね
そうだから極端なこと言うとHMLの
クラス属性にbdb500っていう指定し
なくてもうん文字列としてあればいいので
コメントアウトでもいいですしそうよね
あのなんなら普通ののテキストにBGブ約
があればスタイルシートは抽出されますね
そうなんですよだからこれはまるはまり方
にもいるんですけどさっきこの動的に
書き換えれないって言ってるんですけど
どっかにそもそもBGBL500あったら
別のところでブルーレッドをこの同的に
書く書け方をしても動いちゃうんですよね
そうだからこういうのがあるとあれ動くの
にみたいなこのややこしいはまり方もでき
たりしますそうそうそうなのでまあんまり
気づかずに動いちゃってるみたいなケース
があるんでまちゃんと仕組みを理解してい
くっていうの大事だなとそうそううんそう
ですね
はいでえっと2つ目はそのコンフリクトが
なぜあの起こるのかというかコンフリクト
した時にスタイルが重いように適用され
ないことがあるっていうケースはまCSS
自体の仕様としてえ1番最後に定義された
プロパティが優先されるっていうまルール
がありますでテイルウンドCSSがその
出力するCSSはんうんえクラスがらく
アルファベット順で出力されるので例えば
BGブルとBGレッだとBとまRなので
ブルーの方が上に先に書かれてレッドはえ
その下に書かれますうんうんでイエローと
かはYなのでさらに下にま書かれるという
ことは同じそのBGレッBGイロを指定し
たとしてもクラス名自体の順序は関係なく
出力されたそのスタイルシートのうんえ
定義順に依存されるので最終的にイエロー
が適用され続けるみたいなことが起るって
ですうんそうですねだからこれもあれです
ねその場合によってなんか動いてるように
も見えたりするわけですよねこのブルーが
デフォルトでレッドでこう後のせしたら
レッドが勝つみたいな動ができちゃったり
しますねこれもややこしいですけどだから
最終的にアウトプットされるその1枚の
CSSまそれを眺めてみたら分かったりし
ますねそうですねまだからいずれにせよH
側のあのクラスの順序に依存したものは
もちろんま書かないと思うんですけどま
間違っても書かないようにすべきそうです
ねはい
うんはいというわけでまあ2つはまり
ポイントま僕もめっちゃくちゃはまった
ポイントなんで多分皆さんもはまはまっ
てるとかこれからはまるかなと思うんです
けどま仕組みさえ知ってれば簡単に回避
できるものなのでまぜひ皆さんもテール
ウィンドを手元でこう簡単に試すことも
できるので手を動かして挙動を見て確認
うんしてみて欲しいですうんでテイル
ウンドマジとかはねすごく便利だし僕も
使ってるんですけどムーさんも使ってます
おあまりえじゃコンフリクトコトしまくり
なじゃないあのテールウィンドマージと
あとよくあるclsxでしたっけの
合わせ技みたいなよくあると思うんです
けどあれがちょっと苦手で僕はテイル
ウンドバリアンというえ別のライブラリー
におお行っていましてめちゃくちゃ便利
です
そうじゃあテルウンドバリアンの話はまた
別ちょっと別ので紹介したいなと思います
お願いしますはいというわけで今日の動画
は以上となりますお疲れ様でしたお疲れ様
でした
5.0 / 5 (0 votes)