質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

意見交換

クローズ

4回答

1347閲覧

Tailwindが好きな方、メリットを語ってください!

Hayato1201

総合スコア220

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

1グッド

0クリップ

投稿2023/04/12 06:23

1

0

今まで、scss などを用いて独自に class を定義するのに慣れてしまっていましたが、今度 tailwind を使うにあたってユーティリティファーストの良さを調べました。

そこで このような サイトを参考に、なんとなくtailwind のメリットも見えてきた気もしました。

しかしまだいくつか以下のような疑問も残っています。

  1. ブラウザ上で div にスタイルを追加していって理想の形にした後そのスタイルをコピーして一つのクラスとすればすぐにデザインが出来ますが tailwind ではそのような使い方はできないかと思います。ブラウザ上でスタイルを変更してもこれは何という tailwind のクラスだったかな、と検索をしたり vscode のインテリジェンスに頼ったりしつつそのスタイルを class に変換する必要があるかと思います。この一手間が面倒ではないですか?
  2. 確かに上記サイトでも言うように css が別ファイルに分けられていてどこに当たっているかわからないような状態を避けるために BEM が使われて長いその class 名を当てるくらいなら tailwind の class を使っていくのが良い、というのは分かります。しかし結局 vue や react で scoped な class を指定するのであればその css がどこに当たっているで悩むことってそんなにない気もします。むしろ html 部分( Vue で言えばtemplete ) の部分に長々と class 名が記述されることによる可読性の低下の方がデメリットに感じてしまいます。実際最近の FW ではコンポーネント毎に分離されていてそこまで大きなファイルにならない事も多いため尚更 html 部分の可読性の悪さの方が目についてしまう気がします。

これだけ多くの人が使っていて良いと言っているライブラリである以上メリットは大きなものだと思っているので、そのメリットを理解した上で納得して使いたいので、この辺りの疑問に明確に回答いただける方いらっしゃいましたらご教示いただけますととても助かります。

logres_Fan👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

回答4

#1

kawax

総合スコア10377

投稿2023/04/12 07:00

「Laravelがtailwindを標準にしたから」以外の理由なんてない。

cssなんて一番優先度が低くて別になんでもいい。どうでもいいcssに拘って時間を無駄にするより他の部分を改善したほうがいい。

初心者にはcssが一番簡単に見るけど詳しくなればなるほどcssは避けたくなる。tailwindを使うとcssの一番難解な部分を避けられる。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#2

Hayato1201

総合スコア220

投稿2023/04/12 09:22

#1 ご回答ありがとうございます!

cssの一番難解な部分を避けられる。

一番難解なのはどう言った部分だと思われますか?

また、質問文に書かせていただいた項番1,2についてはいかがお考えでしょうか??

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#3

yagihiro

総合スコア73

投稿2023/04/13 11:13

これ系の話は往々にして歴史的経緯を知ると理解しやすいと考えております。

CSS の歴史について、僕が先日読んだ記事で The evolution of scalable CSS があります。まさに歴史的経緯を知るのにうってつけなのでぜひご質問者さまにもご覧頂きたいなと思っております。

この記事内にも記載されていますが、2023年前後の状況としては、コンポーネントベースでフロントエンドアプリケーションを構築するプロジェクトが多いという背景、テクニカルな意味でのデザインシステムを前提とする背景、パフォーマンスをより良くすることにSEO上の価値があるという背景、あたりを状況的コンテキストとして意識する必要があるかと思います。
(逆に言うとこの背景と合致していない開発のご担当をされている場合は、コンテキストが違うので Tailwind は適切ではない可能性があるかと思います)

Tailwindは上記の背景が合致するプロジェクトにおいて、それぞれの課題を克服しやすいことが昨今流行している理由であると考えております。

ご質問文面に記載されている「疑問」を読む限り、背景があまり合致していない様子が伺えますので無理にプロジェクト内で採用する必要はないのかもしれませんね。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#4

Hayato1201

総合スコア220

投稿2023/04/15 02:56

編集2023/04/15 03:01

#3 ご回答ありがとうございます!

添付いただいた記事に目を通させていただきました。基本的に質問の方に添付いたしました記事と似たような内容であった印象ですが、質問 1, 2 に記載させていただいたように 1. ブラウザでリアルタイムにスタイルを変更してコードにはそれを貼り付けるだけ、という実装ができない点、2. Tailwind で謳われている保守性の向上も、結局 scoped でスタイルを記述できることからそこまでメリットに感じない、むしろ html 側の可読性が下がるデメリットの方が大きいのでは?という疑問がまだ晴れない状態です。

背景があまり合致していない様子が伺えますので

こちらについて、どのような背景だとむしろ Tailwind の良さが感じらるのでしょうか?上記1,2に関しては基本てきに React や Vue などの FW を使う上では常に起こりうる状況な気がしているためご教示いただけますと助かります!

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問