0
0
普段独自クラスを用いてフロントの実装をする際、 chrome のディベロッパーモードを使って直接スタイルを調節し、変化を見ながら画面を作っていき、ある程度完成したらそれをコピーしてエディタに戻ってコード側にそれを貼り付け、というように実装する事が結構ありますが、 tailwind を使う場合、クラス名を直接ブラウザで変更したところで表示はされないのでブラウザ側でスタイルを変更しながら実装という事はしないのでしょうか？
エディタ側で class を変更して保存→ブラウザを見て確認→またエディタ側を見て、、という流れになりますか？
それともブラウザ側でスタイルを作る場合、
ブラウザでスタイルを調節→思うような形になったらそのスタイルに当たる tailwind のクラスに脳内変換する→エディタ上でそれを書き出す。。。
という流れになるのでしょうか？いくら tailwind に慣れていても最初からエディタの html 常にいきなり tailwind のクラスを書いて一発で思い通りになる事はない気がするのですが、 tailwind に慣れている方はどのように実装を進めていますか？？
回答2件
#1
退会済みユーザー
総合スコア0
投稿2023/04/17 12:45
エディタで変更したらブラウザが自動的にリロードして確認できる。
ホットリロードとかブラウザシンクとか呼ばれる機能。
フロントでも10年くらい前から当たり前に使われている。
tailwind使ってる人は10年分の色々やってきた経験の上で使ってるので前提となる常識が抜けてる人が使っても理解できない。
tailwindに慣れてる人はhtmlにいきなり書ける。
エディタでの補完もあるので「te」とか「fo」とか入力すれば候補が出てきて簡単に入力できる。
「プロジェクトごとにバラバラで統一されてないcssのクラス名」ではこの補完での入力がしにくい。
候補に出てきても「button3」なんてクラスが実際にどんなcssなのかは分からない。
html書いてる途中でcssの確認が必要になるのは思考が分断される。
#2
#1 もちろんホットリロードは使っていますが、ブラウザ上で変更した方がより早いですよね、という話です。
結局 Vue や React で scoped な css を使うのでそこまで共通の css を使う事は無いと思います。寧ろコンポーネント化してそれを共通利用となるかと思います。
また button3 なんていう css のクラスを作るのは論外だという前提ですし、誰かの作った謎の button3 クラスを使わなければいけないという状態はそもそも問題だと思います。
コンポーネント化してそれを再利用するという前提であれば尚のこと tailwind を使う利点が分からないなという感じですかね。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。