1
0
今まで、scss などを用いて独自に class を定義するのに慣れてしまっていましたが、今度 tailwind を使うにあたってユーティリティファーストの良さを調べました。
そこで このような サイトを参考に、なんとなくtailwind のメリットも見えてきた気もしました。
しかしまだいくつか以下のような疑問も残っています。
- ブラウザ上で div にスタイルを追加していって理想の形にした後そのスタイルをコピーして一つのクラスとすればすぐにデザインが出来ますが tailwind ではそのような使い方はできないかと思います。ブラウザ上でスタイルを変更してもこれは何という tailwind のクラスだったかな、と検索をしたり vscode のインテリジェンスに頼ったりしつつそのスタイルを class に変換する必要があるかと思います。この一手間が面倒ではないですか？
- 確かに上記サイトでも言うように css が別ファイルに分けられていてどこに当たっているかわからないような状態を避けるために BEM が使われて長いその class 名を当てるくらいなら tailwind の class を使っていくのが良い、というのは分かります。しかし結局 vue や react で scoped な class を指定するのであればその css がどこに当たっているで悩むことってそんなにない気もします。むしろ html 部分( Vue で言えばtemplete ) の部分に長々と class 名が記述されることによる可読性の低下の方がデメリットに感じてしまいます。実際最近の FW ではコンポーネント毎に分離されていてそこまで大きなファイルにならない事も多いため尚更 html 部分の可読性の悪さの方が目についてしまう気がします。
これだけ多くの人が使っていて良いと言っているライブラリである以上メリットは大きなものだと思っているので、そのメリットを理解した上で納得して使いたいので、この辺りの疑問に明確に回答いただける方いらっしゃいましたらご教示いただけますととても助かります。
回答4件
#1
退会済みユーザー
総合スコア0
投稿2023/04/12 07:00
「Laravelがtailwindを標準にしたから」以外の理由なんてない。
cssなんて一番優先度が低くて別になんでもいい。どうでもいいcssに拘って時間を無駄にするより他の部分を改善したほうがいい。
初心者にはcssが一番簡単に見るけど詳しくなればなるほどcssは避けたくなる。tailwindを使うとcssの一番難解な部分を避けられる。
#2
#1 ご回答ありがとうございます！
cssの一番難解な部分を避けられる。
一番難解なのはどう言った部分だと思われますか？
また、質問文に書かせていただいた項番1,2についてはいかがお考えでしょうか？？
#3
総合スコア73
投稿2023/04/13 11:13
これ系の話は往々にして歴史的経緯を知ると理解しやすいと考えております。
CSS の歴史について、僕が先日読んだ記事で The evolution of scalable CSS があります。まさに歴史的経緯を知るのにうってつけなのでぜひご質問者さまにもご覧頂きたいなと思っております。
この記事内にも記載されていますが、2023年前後の状況としては、コンポーネントベースでフロントエンドアプリケーションを構築するプロジェクトが多いという背景、テクニカルな意味でのデザインシステムを前提とする背景、パフォーマンスをより良くすることにSEO上の価値があるという背景、あたりを状況的コンテキストとして意識する必要があるかと思います。
(逆に言うとこの背景と合致していない開発のご担当をされている場合は、コンテキストが違うので Tailwind は適切ではない可能性があるかと思います)
Tailwindは上記の背景が合致するプロジェクトにおいて、それぞれの課題を克服しやすいことが昨今流行している理由であると考えております。
ご質問文面に記載されている「疑問」を読む限り、背景があまり合致していない様子が伺えますので無理にプロジェクト内で採用する必要はないのかもしれませんね。
#4
#3 ご回答ありがとうございます！
添付いただいた記事に目を通させていただきました。基本的に質問の方に添付いたしました記事と似たような内容であった印象ですが、質問 1, 2 に記載させていただいたように 1. ブラウザでリアルタイムにスタイルを変更してコードにはそれを貼り付けるだけ、という実装ができない点、2. Tailwind で謳われている保守性の向上も、結局 scoped でスタイルを記述できることからそこまでメリットに感じない、むしろ html 側の可読性が下がるデメリットの方が大きいのでは？という疑問がまだ晴れない状態です。
背景があまり合致していない様子が伺えますので
こちらについて、どのような背景だとむしろ Tailwind の良さが感じらるのでしょうか？上記1,2に関しては基本てきに React や Vue などの FW を使う上では常に起こりうる状況な気がしているためご教示いただけますと助かります！
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。