【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう

[@shimabu_it]

これから数回に分けてTailwind CSSに関する講座をアップしていきます！ 今流行りのCSSフレームワークでReactやVue.jsと一緒に使われることも多いです！ React, Next.js, npm, ...etcなどのモダンJS講座は現在サロンで先行公開中 → it-kingdom.com/

[@辛辣犬]

class名を考えなくてもいいのでという本来使い物にならない空タグが当たり前に置けるのがいいですよね！display: flexでspace-betweenのときにレイアウトが変わってしまう恐れがなくなり、これだけでめちゃくちゃ感動しました。

[@ytmi1230]

Tailwind CSSは気になっていたので講座開始嬉しいです。

[@shimabu_it]

おーそれはグッドタイミングでした😂 これから楽しみにしていてください✨

[@riorio5535]

お疲れ様です！勉強させていただきます！

[@shimabu_it]

ぜひぜひ学んでいってください😊✨

[@圭二山本]

GOODでした

[@channel-hk8jw]

いいものを紹介してくれてありがとうございます！今開発してるものに早速組み込みますね！

[@Sケイ-d3i]

質問です！XDであらかじめデザインを決めている場合、どちらの方法が効率的ですか？ ・Tailwind CSSを使用してXDからサイトの値をトレースする ・自分でclassを決めCSSを付与して従来通りXDからトレースしてデザインしていく よろしくお願い致します

[@shimabu_it]

おそくなりましたが、完全にその人のスキル次第です。 TailwindCSSを使えるのであれば確実に前者のほうが効率的ですね😊

[@優一向井]

待ってました👏👏

[@shimabu_it]

お待たせしましたー(・∀・；)

[@kaierh.1194]

オブジェクト指向 CSS の高機能で気の利いたやつって感じですね。 FLOCSS 的な組み方をする場合でも utility クラスは書かずに Tailwind CSS を使うと、イレギュラー対応を手癖でできそうです

[@HaluNo9]

最近拝見していますがこの内容が無料で見られるのはちょっと信じられないですね… IT大学と謳っていますが実際は大学よりも超実務寄りなので現場でも初心者でも助かることこの上ないコンテンツですね！ ありがとうございます！

[@shimabu_it]

そのように言ってくださりありがとうございます。 たいへんうれしいです😂

[@aki9341]

正統派イケメンに教えてもらって嬉しい限りです

[@shimabu_it]

正統派イケメン！！😂

[@taskfiba1309]

ありがとうございます

[@shimabu_it]

コメント嬉しいです。動画投稿がんばります💪💪

[@ぐうたらぼっち-e7t]

css版jQueryって感じだね cssもjsみたいにモジュールとかスコープ的なもの欲しいけど、カスケーディングって言うくらいだから来ないだろうな…

[@mk-rf9mf]

CSSフレームワークを選定する上で、TailwindCSSとCSS Moduleで迷ってます。Qiitaなどでも少し漁りましたが正直、どちらも良さそうで結局迷ったままです。しまぶーさんはCSS Moduleと比較した上でどの点で、またどういったケースで、TailwindCSSが優れているとお考えでしょうか？

[@shimabu_it]

完全に用途によるとは思っているのですが、自分の場合は実装速度を割と重視していて、その場合Tailwind CSSの方が向いているなと思って使っています。cssファイルを作ったり命名したり細かい単位を決めたりする手間が無い分、Tailwind CSSは早いです。反面、デザイナーとの協業だったりではCSS Modulesの方が秀でていそうですね！ざっくりですが参考になれば😆

[@mk-rf9mf]

@@shimabu_it ご回答下さりありがとうございます！参考にさせていただきます！m(_ _)m

[@hirosuke_0520]

ちょうどTailwind CSSの話を聞いて勉強しようかなーってタイミングだったので、すごく助かります！

[@shimabu_it]

プロダクトでも使ってください👍✨

[@たんたん-n3d]

ReactやReactNativeなどのライブラリでも使用することはできるのでしょうか?

[@shimabu_it]

Reactではもちろん使えます。私はむしろヘビーユースしていますよ💪💪 React Nativeは有志が頑張ってTailwind CSSを使うためのライブラリを作っていたりはしますが基本は公式じゃないので辞めた方が良いです。

[@ponpon-pj6fh]

複数人が触る場合のメンテナンス性とかってどうなんだろう？ sassで必要なものだけ変数指定するよりこっちのほうが楽なのかな？

[@shimabu_it]

メンテナンス性はかなり高いと思いますよ〜！ただJSフレームワークとの組み合わせでかなり威力を発揮する部分もあるので、Reactとかも一緒に学んでおきたいところではありますね！👀

[@ponpon-pj6fh]

@@shimabu_it なるほど！レスポンシブ対応も簡単にできますか？デザインによるかもですが、、、

[@akira2133]

tailwind css気になってたので、とても楽しみです！✨ 特に、Bootstrapとの差別化が気になります🤔🤔

[@shimabu_it]

ありがとうございます〜！！ Bootstrapとの違いは要望も多いのでまた動画で解説しますね💪

[@yuuttana1223]

tailwind cssいつかやってくれると信じてました。どれぐらいのボリュームになりそうですか？

[@shimabu_it]

私も激推しのフレームワークです😊 ボリュームは未定ですが10本ぐらいはいきそうです(・∀・；)

[@高島雅矢]

Bootstrap と何が違うんですか？

[@shimabu_it]

Bootstrapとの違いについては、他の方からの要望も多かったのでまた動画で解説しますね🙏

[@tomo6723]

いつも助かってます！ファンです！ IT KINGDOMに入国するとREST APIの講座も受けられますか？また、現在はDjangoでAPIを叩いていますが、FirebaseとNode.jsも学びたいです！

[@shimabu_it]

ありがとうございます！REST APIの講座はまだ無いですが、質問できる環境はあります。またFirebaseとNode.jsも講座としてはまだないですが、私含め運営の得意とする技術スタックなので、ぜひ質問してください！😊 ちなみにサロン内ではPythonコミュニティが熱いので、そこもオススメです！👍✨

[@k.n.8120]

これだと結局は自分でデザイン考えないといけない感じがしちゃって、個人開発では結局Bulmaとか使いたくなっちゃいそう、、

[@shimabu_it]

デザインが苦手であれば仰るとおりかもしれませんね😂

[@としU]

Bootstrapより柔軟性があるように感じました。 Bootstrapとの差やtailwindCSS一択なのかなど解説頂けると嬉しいです。 いつもありがとう御座います

[@shimabu_it]

次の動画がBootstrapとの比較動画です😊 お楽しみに〜！✨

HTML2.0からコーディングしてるおじさんですが、もうついていけない。。💦

[@shimabu_it]

なんとそんな昔から・・・（私がまったく知らない時代！笑） 間違いなく便利にはなっているはずですので、覚えておいて損はないと思います😊

[@yuukik2381]

web制作にも利用できますかね〜🤔

[@shimabu_it]

Web制作でも使えると思いますよー！私だったら使います😊

[@yuukik2381]

@@shimabu_it ありがとうございます！ 試してみます☺️

[@yuu30n45]

クラスがどうしても長くなると思うのですが、慣れたら気にならないでしょうか？

[@shimabu_it]

まったくもって気にならないです！慣れですね！👍👍

[@HELLOEARTH76]

こういうのHTML内のclassの量は気にしないの？

[@shimabu_it]

（cssファイルができることとのトレードオフなので）気にならないのもありますが、applyを使うことで解決もできますよー！

[@MrKametyou]

個人的にめっちゃ使いづらかった。 長所の一つに微調整で頭を使わなくていいとおっしゃってましたが、逆にいうと微調整する時はかなり面倒くさい。例えばheight 64px にしたいなどとなったら、いっこいっこconfigに書かないといけない。 あとcss のプロパティ名が純粋なcssと完全一致じゃないから一回一回調べるのかなり面倒くさかった。

[@MrKametyou]

どうやら一つ目の問題はアップデートで指定できる範囲が増えたっぽいですね

[@shimabu_it]

ですです！後ほど講座で扱う予定ですが微調整は簡単に行なえます。覚えるのは大変ですが一度覚えたら超楽になる感じですね。最初だけ頑張りが必要です😂

[@HA-RU-]

凄く使いやすそうで良いですねー！！ 有益動画ありがとうございます！ 1つ質問なのですが。。 デザインカンプありきで作成する場合こういったフレームワーク的なのって逆に手間が増えたりする時あるのですが、デザインありきのコーディングの場合も問題無く活用できる感じでしょうか？？🧐

[@shimabu_it]

Bootstrapのようなデザインまで関与するCSSフレームワークだと手間が増えるかと思いますが、Tailwind CSSの場合はほとんど手間は増えないかと思いますよ！むしろ慣れると早くなって工数削減できるかと思います！👍👍

[@HA-RU-]

@@shimabu_it 返信ありがとうございます！！ 回答して貰えるとは思ってなくてめっちゃ嬉しいです☺️ しまぶーさんの動画も見つつ実践してみます！😍

[@たくぞう-i7v]

初心者にも向いてますか？

[@shimabu_it]

CSSのある程度の理解があれば理解できるはずです！👌

[@たくぞう-i7v]

@@shimabu_it ありがとうございます。

[@panioka]

bootstrapとの違いを詳しく知りたいです！

[@shimabu_it]

こちら、他の方からもたくさん要望をいただいたので動画で解説させていただきますね！😊✨

[@tankobu5590]

普通にsassで書いた方が効率的な気がする

[@とも-i6h1i]

ん～～～、まるでstyle属性に直書きしている様ですね。 メディアクエリーも使えるのでもっと便利なのでしょうけど。。

[@tkskswy]

こりゃCSSの書き方を覚えなくなるな。

[@安達さとし]

ブートストラップに似てる？

[@shimabu_it]

Bootstrapとの比較動画を次に出しますね😊

[@アスペルギルスオリゼ]

TailwindからJava Scriptを使う方法が分かりません

[@km2n]

便利なようにも見えるけどHTMLにcssを書き込んでるような構造になってしまって、デザインと文書構造の分離っていうcssを使う利点が潰れてしまうような気がしますね

[@shimabu_it]

applyを使うことで回避できますので、そこは問題ないはずですよー！！😊

[@sharifuddin1698]

What are you saying?😞

[@shimabu_it]

Tailwind CSS is great and talks about why to choose it! 😊

[@sharifuddin1698]

@@shimabu_it ow🙄

[@taken201102]

変態かよ、使い所がわからん。Bootstrapもいらんけど。 mindBEMdingか、 Vue.jsのScoped CSSが最高。

[@shimabu_it]

結構流行ってきていますよー！特にTwitterの海外アカウントをフォローしてるとプロダクトの採用事例とかでよく目にします！ BEMは結構古く最近のプロジェクトだと採用されていない印象ですが、Vue.jsのScoped CSSは良いと思います！👍

[@ぞのw]

これはプロの現場では使えませんね

[@shimabu_it]

これから増えていくと思いますよー！

[@ぞのw]

@@shimabu_it さん 失礼ながら、全く使わないクラスをこれだけ内包しているものをプロは使いませんし、これを使うより早くコーディングできますよ。。。プロは

[@willywonka6697]

@@ぞのw 11:06　 ちなみにプロはスタイリングは何を使うのですか？