TailwindCSSを始めようとしている人へ

TailwindCSSを始めようとしている人へ JSフレームワーク内でスタイルをどのように当てるべきかは,多く議論されるものであるが,そんな中でTailwindCSSが注目と人気を集めている様子である. それはそうと私はなかなか使うまで踏み出せなかったが,v3.0以降にようやく使ってみたので, 使い方をざっくり知りたい人 できることをざっくり知りたい人 TailwindCSSをエアプしたい人 に向けて個人的な所感と要点を書いていく. TailwindCSSをすごく簡単に classNameに特定のclassを指定することでStyleを当てていくCSSフレームワーク. 例えば,ここにあるように, bg-red-600とclassNameをつけることで,CSSのbackground-color: #dc2626;と同様のCSSプロパティを当てたことになる. 普段このように書くところを

[otchy210]

最近よく見るようになったけど、まじでみんなこれが良いの？<font size="2" color="red"> の時代に戻った感じで個人的にはもの凄い抵抗あるんだけど…。

[mayumayu_nimolove]

使いこなせない人は別に使わなくていいんじゃねーの。これ使いたい人向けの記事なんだし文句書くとこじゃないから。

[akahigeg]

コンポーネントベースならこれで充分というか非常によく機能する。CSS設計なんかいらんかったんやってなる。

[kvx]

インラインスタイルとは別物。apply使って普通の運用でも良いし。メディアクエリ使わずにレスポンシブ対応する気持ちよさは最高。

[bamch0h]

結局は、生のhtml+cssを想定してるんじゃなくてvueやreactと組み合わせて使うことを前提としてるっぽい？ https://fixel.co.jp/blog/tailwindcss/

[i5s4y]

「Tailwindはインラインスタイルと変わらない..」派はもうちょっと勉強しましょう、ぜんぜん違います

[ejointjp]

使ってみて分かったけどインラインスタイルともBootstrapともまったく違う（いい意味で）。コンポーネントベースとはとても相性がいいと思う。反面近年のWordPressとはすこぶる相性悪いと感じる。

[Finding]

記事内にも言及があるけど、最新のv3.0.23では"任意数"が使える。例えば mt-[33px]と書くと margin-top: 33px; というスタイル。自由度はほぼ無限になった、と言って良い気がするなぁ。

[ultimatebreak]

デザイナーとCSSフレームワークを使うことが握れてないと途端にゴミになるので使う機会が無い人にはとことん使う機会がない

[jkjidjss]

文書構造と見た目分けたければapplyとscss組み合わせて展開不要のemmetみたいな運用できる。その場でパッとコーディングしたい時にも使える。なれると本当楽だよ。ただしデザイナー側にコンポーネントの意識が無いと積む

[bascinet]

JIT使うぐらいならもうscopedでsassなりなんなり書けばいいじゃんって思うのでconfigで設定したガイドラインからはみ出ない書き方が出来るならtailwindは良いと思います

[kobito19]

tailwind は"向かい風"。しっぽ側から吹いてる風、みたいなイメージなのかな。対義語の追い風は headwind。

[Falky]

思想すっ飛ばしてHowだけ書いてある感じだね。別にただのblogだから全く構わないと思うんだけど、もし実用する場合、思想を知らずに使うとただのアンチパターンに陥る気がするので気を付けたいね

[yarumato]

ゼロ年代に「見た目と文書構造を分離しよう」という理想が掲げられて、そのために見た目だけ操作するCSSが導入されて、HTMLから見た目情報を排除した、という事情を今時のWebデザイナーは知らないのかもな

[Rishatang]

JITモードだとHMRが動作しない問題なおったのかな？

[n314]

結局必要だったものは、もっと強力なインラインスタイルだったっていうことかな？ブコメとリンク先見て、分かりやすい名付けと共通化はHTMLとセットで他のレイヤーでやるのが必須っぽい。

[tivrsky]

わかりやすい

[greenbow]

これ読んだだけだとイマイチ良さがわからなかった。

[circled]

Vueやreactみたいにコンポーネント単位で呼び出して画面作る分にはtailwindの長くなるクラス指定も気にならないと言うか、一度作ってしまえば終わりだし、細かな微調整を後から入れるのも楽なので、もう他に戻れない。

[strawberryhunter]

CSSクラスがスタイルを直接表しているという意味でstyle属性に直接指定するのと同義なんだけど、"全然違う"と言うのは擬似クラスも指定できるとか、実はutility classは目くらましでtranspilerが真の姿って言いたいのかも。

[seikenn]

人の書いたやついじるときは楽そう

[sisya]

いにしえのHTMLと何が違うのだろう。ざっと流し読みするだけで大まかにわかる学習コストの低さはわかるのだが、デザインと文書構造の分離に腐心した20年が丸ごと無駄になってしまったようなむなしさを感じる。

[nzxx]

tailwindはそれ自体で一語だからTailwindでは