![](https://cdn-ak-scissors.b.st-hatena.com/image/square/0f161b16808f52b547936a47ffa69e4be2885bed/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU4JTg5JUIyJUUzJTgwJTg1JUU2JTlCJUI4JUUzJTgxJThEJUU2JUFGJTk0JUUzJTgxJUI5JUUzJTgxJTlGJUU3JUI1JTkwJUU2JTlFJTlDVGFpbHdpbmQlMjBDU1MlRTMlODElQUIlRTMlODElOTclRTMlODElOUYlRTMlODElQTglRTMlODElODQlRTMlODElODYlRTglQTklQjEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEyYzU2NjU4ZDg4YjUwODgxMjA0MjFiMTZiZTY4MjNl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBUYWthenVkbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NWUxM2EzYmVjNTNmNTEyYzA0MjdiYmUyZmYzNTFjMzI%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44OU44Kv44K744Or44Kw44Oq44OD44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D63e2753e5223f453389e577d7c6e7ab6)
エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント39件
- 注目コメント
- 新着コメント
![callirhoe08 callirhoe08](https://cdn.profile-image.st-hatena.com/users/callirhoe08/profile.png)
callirhoe08
ブコメのネガティブなコメントしてる内どれだけが実務でVue, Reactを使用してるか気になる。あと特にCSSデザインしてくれる人が居ない現場だとTailwindは良いと思えるけどなぁ。
![circled circled](https://cdn.profile-image.st-hatena.com/users/circled/profile.png)
circled
一度基本クラスを覚えてしまえば、後は作りたい形に合わせて脳味噌が自動で必要なクラスを埋めてくれるようになるのがtailwindcss。凝ってくるとクソ長くなりがちだけど、最近のIDEはタグ毎に最小化表示があるのでな。
![Rishatang Rishatang](https://cdn.profile-image.st-hatena.com/users/Rishatang/profile.png)
Rishatang
BootstrapとかBulmaとか推してる人結構ブコメにいるけど、デザインどうしてるんだろう。デザイナが各UIフレームワークがどれだけカスタマイズ出来るのか詳しくないと容易に破綻すると思ってるんだけど
![uehaj uehaj](https://cdn.profile-image.st-hatena.com/users/uehaj/profile.png)
uehaj
「HTMLとスタイルシートの両方が開発を通じて、改良・変化していく」という状況において、変更主体が2つあるというのは許容できない。主体をJS側に寄せるとTailwindがほぼ唯一の選択肢になる。
![d4-1977 d4-1977](https://cdn.profile-image.st-hatena.com/users/d4-1977/profile.png)
d4-1977
Code Gridの人の話だった。Tailwind CSSはともかく?Reactを使うか使わないかでCSSの設計が大きく変わるのは、デスヨネーって気持ちになりました。新卒研修するならReactあり無しで研修内容が異なるよね
![sigwyg sigwyg](https://cdn.profile-image.st-hatena.com/users/sigwyg/profile.png)
sigwyg
“Tailwind CSSは、そもそもCSS in JSとはちょっと毛色が違いまして、ユーティリティークラスを作る﹁フレームワーク﹂なんですよ。” なるほど。Angularに入るみたいだし、次入れてみるかな
![auient auient](https://cdn.profile-image.st-hatena.com/users/auient/profile.png)
auient
文書とレイアウトの分離という目的が間違っていたのかな。人間はレイアウトされた文書が読みたいし、レイアウトはだいたい1つで十分、文書構造のためにレイアウトを犠牲にするよりその逆にしちゃう。
![tkmkg8m tkmkg8m](https://cdn.profile-image.st-hatena.com/users/tkmkg8m/profile.png)
tkmkg8m
コンポーネントでスコープ切ればクラス名つけるのは難しくないのでCSS in JSでそのままCSS書きたい。スコープ切ってtailwind噛ますのは過剰なレイヤーに感じる。あと値の共通化はCSSのカスタムプロパティがいい。
![highgrenade highgrenade](https://cdn.profile-image.st-hatena.com/users/highgrenade/profile.png)
highgrenade
ReactでCSSを扱う時にCSS Modules, styled-components, emotionって遷移で使ってたら、tailwindって解が出てくるのは、合理的だと思う。
![callirhoe08 callirhoe08](https://cdn.profile-image.st-hatena.com/users/callirhoe08/profile.png)
callirhoe08
ブコメのネガティブなコメントしてる内どれだけが実務でVue, Reactを使用してるか気になる。あと特にCSSデザインしてくれる人が居ない現場だとTailwindは良いと思えるけどなぁ。
![shimarisugi shimarisugi](https://cdn.profile-image.st-hatena.com/users/shimarisugi/profile.png)
shimarisugi
“classnames-template-literals”は絶対後で試す。/ メデイアクエリやアニメーションはハイオーダーコンポーネントに分離できるといいんだけどまだしっくり来るやり方が見つからない
![Rishatang Rishatang](https://cdn.profile-image.st-hatena.com/users/Rishatang/profile.png)
Rishatang
BootstrapとかBulmaとか推してる人結構ブコメにいるけど、デザインどうしてるんだろう。デザイナが各UIフレームワークがどれだけカスタマイズ出来るのか詳しくないと容易に破綻すると思ってるんだけど
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
いまの話題をアプリでチェック!
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが...要を表示
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は?何いってんの? って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が﹁まかせてくださいよーいい感じに作りますよー。デザインそろってない
2021/06/07 リンク