色々書き比べた結果Tailwind CSSにしたという話 - Qiita

Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない

[lifeisadog]

文書とレイアウトの分離という本来目指すべき方向性と全く違っちゃうんだよなあ

[dotneet]

CSSの書き方だけでこれだけ語れちゃう状況自体がフロントエンド開発に初心者を寄せ付けない状態になっているってことなんだよな。と思わせられる。

[callirhoe08]

ブコメのネガティブなコメントしてる内どれだけが実務でVue, Reactを使用してるか気になる。あと特にCSSデザインしてくれる人が居ない現場だとTailwindは良いと思えるけどなぁ。

[circled]

一度基本クラスを覚えてしまえば、後は作りたい形に合わせて脳味噌が自動で必要なクラスを埋めてくれるようになるのがtailwindcss。凝ってくるとクソ長くなりがちだけど、最近のIDEはタグ毎に最小化表示があるのでな。

[morimarii]

全然関係ないが「Tailwind」を「タイランド」って読ん出た人思い出した

[laiso]

フラットにHTML+CSS書く仕事してる人は利便性感じにくいだろうなと思って最後まで読んだらいいことが書かれていた

[syunnchang]

ここまでやるならもうStyle属性直書きでよくないかってなるんだけど

[Rishatang]

BootstrapとかBulmaとか推してる人結構ブコメにいるけど、デザインどうしてるんだろう。デザイナが各UIフレームワークがどれだけカスタマイズ出来るのか詳しくないと容易に破綻すると思ってるんだけど

[kijtra]

Tailwindって、使ってない人ほど叩きがちだよね。

[a_horuru]

CSSを書いた人が後々も管理するなら好きにすればいいんだけどね。

[uehaj]

「HTMLとスタイルシートの両方が開発を通じて、改良・変化していく」という状況において、変更主体が2つあるというのは許容できない。主体をJS側に寄せるとTailwindがほぼ唯一の選択肢になる。

[d4-1977]

Code Gridの人の話だった。Tailwind CSSはともかく？Reactを使うか使わないかでCSSの設計が大きく変わるのは、デスヨネーって気持ちになりました。新卒研修するならReactあり無しで研修内容が異なるよね

[kzms2]

超良記事なのでCSS設計について全体感知りたい方は見るべし👀 個人的には「ユーティリティーファースト」な設計は昔から推し

[sigwyg]

“Tailwind CSSは、そもそもCSS in JSとはちょっと毛色が違いまして、ユーティリティークラスを作る「フレームワーク」なんですよ。”　なるほど。Angularに入るみたいだし、次入れてみるかな

[auient]

文書とレイアウトの分離という目的が間違っていたのかな。人間はレイアウトされた文書が読みたいし、レイアウトはだいたい1つで十分、文書構造のためにレイアウトを犠牲にするよりその逆にしちゃう。

[o_hiroyuki]

JITモード良いな

[tkmkg8m]

コンポーネントでスコープ切ればクラス名つけるのは難しくないのでCSS in JSでそのままCSS書きたい。スコープ切ってtailwind噛ますのは過剰なレイヤーに感じる。あと値の共通化はCSSのカスタムプロパティがいい。

[tnkhtm]

今ちょうど仕事で使い始めたところなのでブックマーク

[highgrenade]

ReactでCSSを扱う時にCSS Modules, styled-components, emotionって遷移で使ってたら、tailwindって解が出てくるのは、合理的だと思う。

[door-s-dev]

あくまでCSSのaliasという認識。しかし記事の内容はほとんどtailwind関係ないような

[z1h4784]

BEM的な使い方をやってみてるけど、結構いいよ。デザインシステムを作るのに適しているフレームワークで、ReactやVueと一緒に使うかどうかは重要な論点ではないんじゃないのかな

[tokumaga]

“すね。さらに、このCSSの中ではさっきBEM + Tailwind CSSでやったみたいに、@applyが使えたりもします。PostCSSが使えるってことです。CSS in JSとかハックっぽい感じがしますし、そんなことする必要ないでしょ？これでよくない

[nakayuki805]

tailwindってつまりただのstyle="~"属性の中身がcalssになっただけの糖衣構文なのでは (個別のタグに対してスタイルを適用するという意味で)

[hasiduki]

勉強になる

[for-my-internet-demo]

細かく履修してないけどだいたいコモディティ化する流れだけ追ってればいいか系。思考の流れ書いてくれてるのいいね

[hirokts]

タイランドの発音は初代スト2のサガットステージ

[snipesnaps]

もうvueでコンポーネントに押し込んどけばいいやってなってここらへん思考停止してしまった自分。

[Keisuke69]

あとでもう一回ちゃんと読もう。この辺いつまででも悩んでられるな（そして何も生み出されない）

[shimarisugi]

“classnames-template-literals”は絶対後で試す。/ メデイアクエリやアニメーションはハイオーダーコンポーネントに分離できるといいんだけどまだしっくり来るやり方が見つからない

[mayumayu_nimolove]

tailwindは必ずプチ議論が起こるけど、ぶっちゃけ好きなもの使えばって話。単なる道具なんだから。何がやりたいのかを叶えるものなら何だっていい話。

[renowan]

Vue, Reactとかのコンポーネントでの開発ならクラス名が長くなっても気にならない。

[Phenomenon]

ありがてえありがてえ

[kvx]

最高だ/文章とレイアウトの分離はできてるだろう。クラス名山盛りでもcss切った状態でもきちんと読めればいいわけで。

[gigix]

クラス長くなって読みづれーーーと脱落して、Bulma。うーん、そんなに言うならもっかい使ってみるか…？